{"componentChunkName":"component---src-templates-post-js","path":"/blog/workpad-part-3","webpackCompilationHash":"97000b66fda8dd565841","result":{"data":{"site":{"siteMetadata":{"keywords":["blog","ubug","tech blog","技术博客","playground"]}},"mdx":{"fields":{"title":"🌋 WebIDE 的开发记录其三（editor 集成）","tips":[],"categories":["webide"],"datetime":"2020-01-19 21:00:41","noFooter":false,"description":"WorkPad 是一个非常有意思的项目，花了很多空闲时间打磨，光基础架构的重构就好几遍，现在略微记录下开发的思路和想法。本文为第三篇文章，谈谈 monaco-editor 的集成的。","plainTextDescription":"WorkPad 是一个非常有意思的项目，花了很多空闲时间打磨，光基础架构的重构就好几遍，现在略微记录下开发的思路和想法。本文为第三篇文章，谈谈 monaco-editor 的集成的。\n","author":"Ubug","banner":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='291'%3e%3cpath%20d='M0%20147v137h313v-35c1-39%200-40-2-40l-1-2c0-2%201-3%202-3l1-15%201-10v-1l-1-7v-6h78v119h10V9H76v20h-5c-4%200-5%200-4-1h-1c-2%201-4%201-4-2l-1-1v3c1%201-4%201-10%201l-8-1c2%200%203-1%203-3s0-2-9-2-9%200-9%202c-1%203%200%203%205%203l-9%201c-14%200-15%200-14-2v-2l-1-5C9%208%2010%209%205%209H0v138M284%2020l-1%201c-2%200-2%202-2%2012v12h28v-6a163%20163%200%20000-13v-7h-13l-12%201m-137%203l2%202%201-1h1c1%201%2050%201%2050-1%200-1-4-2-27-2-26%200-27%200-27%202m171%2014l37%201%2036-1-36-1-37%201M9%2071v3h67v-6H9v3m108%2044v2c-1%202%201%202%2020%202a94%2094%200%200021-1l1-1a2801%202801%200%2000-42-1m-24%2011v3H76v3c0%203%200%203%203%203h103l99%201v-7H94v-3l-1-2v2m244%2015l16%201h-16l-16%201a830%20830%200%200016-2m-218%203l-2%201c0%201%204%202%2017%202%2016%200%2017%200%2017-2l-15-1h-17m-31%2010c-11%200-12%200-12%202s1%202%2096%202h98c1%200%202-1%202-3v-2h-86l-98%201'%20fill='%23573ede'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":1.3726273726273726,"src":"/static/bb64a05fbbe7c7a1e8fb20d74f544712/9679e/WorkPad-demo.png","srcSet":"/static/bb64a05fbbe7c7a1e8fb20d74f544712/82675/WorkPad-demo.png 500w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/fef60/WorkPad-demo.png 1000w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/9679e/WorkPad-demo.png 1374w","srcWebp":"/static/bb64a05fbbe7c7a1e8fb20d74f544712/3c76f/WorkPad-demo.webp","srcSetWebp":"/static/bb64a05fbbe7c7a1e8fb20d74f544712/7fe04/WorkPad-demo.webp 500w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/d619e/WorkPad-demo.webp 1000w,\n/static/bb64a05fbbe7c7a1e8fb20d74f544712/3c76f/WorkPad-demo.webp 1374w","sizes":"(max-width: 1374px) 100vw, 1374px"}}},"bannerCredit":null,"slug":"/blog/workpad-part-3","tags":["思考","整理","WorkPad","WebIDE","云开发","在线编辑器"]},"headings":[{"value":"一、monaco-editor 是什么？","depth":2},{"value":"二、集成","depth":2},{"value":"0. 引入","depth":3},{"value":"1. 事先配置","depth":3},{"value":"2. 初始化一个编辑器","depth":3},{"value":"3. 分别储存 model 和 state 来实现多文件编辑","depth":3},{"value":"4. 周边配置","depth":3},{"value":"5. 其他周边","depth":3},{"value":"三、扩展集成","depth":2},{"value":"1. 扩展注册","depth":3},{"value":"2. 数据模型","depth":3},{"value":"3. command 打开","depth":3}],"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n  \"slug\": \"workpad-part-3\",\n  \"title\": \"🌋 WebIDE 的开发记录其三（editor 集成）\",\n  \"date\": \"2020-01-19 21:00:41\",\n  \"author\": \"Ubug\",\n  \"description\": \"WorkPad 是一个非常有意思的项目，花了很多空闲时间打磨，光基础架构的重构就好几遍，现在略微记录下开发的思路和想法。本文为第三篇文章，谈谈 monaco-editor 的集成的。\",\n  \"series\": \"WebIDE 的开发记录\",\n  \"categories\": [\"webide\"],\n  \"tags\": [\"思考\", \"整理\", \"WorkPad\", \"WebIDE\", \"云开发\", \"在线编辑器\"],\n  \"banner\": \"./WorkPad-demo.png\"\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n  console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n  return mdx(\"div\", props);\n};\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n      components\n    } = _ref,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"\\u4E00\\u65B9\\u9762\\u8BF4\\u600E\\u4E48\\u96C6\\u6210 monaco-editor \\u5230\\u9879\\u76EE\\u4E2D\\uFF0C\\u53E6\\u4E00\\u65B9\\u9762\\u600E\\u4E48\\u7528\\u6269\\u5C55\\u7684\\u5F62\\u5F0F\\u52A0\\u5165\\u65B0\\u529F\\u80FD\\u3002\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"PS: \\u672C\\u6587\\u96C6\\u6210 monaco-editor \\u4E0D\\u662F\\u666E\\u904D\\u9002\\u7528\\u7684\\uFF0C\\u5305\\u542B\\u5F88\\u591A\\u9488\\u5BF9\\u5F53\\u524D\\u9879\\u76EE\\u7684\\u96C6\\u6210\\uFF0C\\u6240\\u4EE5\\u4EC5\\u4F9B\\u53C2\\u8003\\u3002\")), mdx(\"h2\", null, \"\\u4E00\\u3001monaco-editor \\u662F\\u4EC0\\u4E48\\uFF1F\"), mdx(\"p\", null, \"monaco-editor \\u662F\\u4E00\\u4E2A\\u975E\\u5E38\\u4F18\\u79C0\\u7684\\u4EE3\\u7801\\u7F16\\u8F91\\u5668\\uFF0C\\u5927\\u540D\\u9F0E\\u9F0E\\u7684 VSCode \\u7684\\u7F16\\u8F91\\u5668\\u5185\\u6838\\uFF0C\\u6709\\u975E\\u5E38\\u5F3A\\u5927\\u7684 IDE \\u529F\\u80FD\\u652F\\u6301\\u3002\\u4E5F\\u6B63\\u662F\\u6709\\u4E86\\u8FD9\\u4E2A\\u4F18\\u79C0\\u7684\\u5DE5\\u5177\\u624D\\u8BA9\\u6D4F\\u89C8\\u5668\\u7F16\\u8F91\\u5668\\u6210\\u4E3A\\u4E86\\u73B0\\u5B9E\\u3002\"), mdx(\"p\", null, \"monaco-editor \\u51C6\\u786E\\u7684\\u8BB2\\u662F\\u4ECE VSCode \\u7684\\u6E90\\u7801\\u4E2D\\u5355\\u72EC\\u62BD\\u79BB\\u51FA\\u6765\\u80FD\\u591F\\u76F4\\u63A5\\u5728\\u6D4F\\u89C8\\u5668\\u4E0A\\u8FD0\\u884C\\uFF0C\\u5F88\\u591A\\u5730\\u65B9\\u548C VSCode \\u7684\\u5B9E\\u73B0\\u5E76\\u4E0D\\u76F8\\u540C\\uFF0C\\u4E0D\\u8FC7\\u7F16\\u8F91\\u5668\\u672C\\u8EAB\\u7684\\u4F53\\u9A8C\\u5927\\u90E8\\u5206\\u662F\\u4E92\\u901A\\u7684\\u3002\"), mdx(\"h2\", null, \"\\u4E8C\\u3001\\u96C6\\u6210\"), mdx(\"p\", null, \"WorkPad \\u9879\\u76EE\\u4E2D\\u7F16\\u8F91\\u5668\\u7684\\u96C6\\u6210\\u4E0D\\u53EF\\u80FD\\u7B80\\u5355\\u4E00\\u7BC7\\u6587\\u7AE0\\u8BF4\\u5F97\\u6E05\\u695A\\uFF0C\\u8FD9\\u91CC\\u53EA\\u662F\\u6700\\u57FA\\u7840\\u503C\\u5F97\\u8BF4\\u7684\\u65B9\\u9762\"), mdx(\"h3\", null, \"0. \\u5F15\\u5165\"), mdx(\"p\", null, \"\\u4F7F\\u7528 rquire \\u7684\\u65B9\\u5F0F\\u52A0\\u8F7D AMD \\u6807\\u51C6\\u6A21\\u5757\\u7684\\u5E93\\uFF0C\\u800C\\u4E0D\\u662F\\b\\u7528 ESM \\u6A21\\u5757\\u6807\\u51C6\\u4EA4\\u7ED9 webpack \\u6253\\u5305\\uFF0C\\u6BD5\\u7ADF\\u8FD9\\u4E2A\\u5185\\u6838\\u86EE\\u5927\\u7684\\uFF0C\\u8FD9\\u6837\\u505A\\u6BD4\\u8F83\\u7075\\u6D3B\\uFF0C\\u591A\\u8BED\\u8A00\\u3001worker \\u4E4B\\u7C7B\\u7684\\u4E0D\\u9700\\u8981\\u8D39\\u795E\\u914D\\u7F6E\\uFF0C\\u540E\\u7EED\\u7684\\u5185\\u90E8\\u6A21\\u5757\\u5F15\\u7528\\u4E5F\\u53EF\\u4EE5\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"require\"), \" \\u6765\\u83B7\\u53D6\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<script src=\\\"/public/vs/loader.js\\\"></script>\\n<script>\\n  require.config({\\n    paths: {\\n      'vs': '/public/vs'\\n    },\\n    'vs/nls': {\\n      availableLanguages: {\\n        '*': 'zh-cn'\\n      }\\n    }\\n  });\\n  // ubug: \\u786E\\u4FDD monaco \\u52A0\\u8F7D\\u6210\\u529F\\u624D\\u80FD\\u8C03\\u7528\\u5B9E\\u9645\\u529F\\u80FD\\n  window.require(['vs/editor/editor.main'], function (editor) {\\n    console.log('monaco-editor \\u52A0\\u8F7D\\u6210\\u529F')\\n\\n    var n = document.createElement('script');\\n    n.type = 'text/javascript';\\n    n.src = 'index.js';\\n    document.body.appendChild(n);\\n    n.onload = ()=> {\\n      console.log('\\u4E3B\\u903B\\u8F91\\u52A0\\u8F7D\\u6210\\u529F')\\n    }\\n  });\\n</script>\\n\")), mdx(\"h3\", null, \"1. \\u4E8B\\u5148\\u914D\\u7F6E\"), mdx(\"p\", null, \"\\u914D\\u7F6E monaco \\u9ED8\\u8BA4\\u914D\\u7F6E\\uFF0C\\u76D1\\u542C editor \\u521B\\u5EFA\\u540E\\u914D\\u7F6E\\u7B49\\u64CD\\u4F5C:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-ts\"\n  }, \"function bindTextmate() {\\n  // ......\\n  monaco.editor.setTheme(currentEditorTheme);\\n  \\n  for (const { id } of monaco.languages.getLanguages()) {\\n    monaco.languages.onLanguage(id, () => activateLanguage(id));\\n  }\\n}\\nconst dirtyManager = new DirtyDiffManager()\\n\\nfunction configureMonaco() {\\n  bindTextmate(); // \\u914D\\u7F6E\\u8BED\\u6CD5\\u9AD8\\u4EAE\\u7B49\\n  // ... bind other things\\n}\\nfunction configureEditor(editor: monaco.editor.IStandaloneCodeEditor) {\\n  dirtyManager.start(editor) // \\u914D\\u7F6E git diff \\u903B\\u8F91\\n}\\n\\nconfigureMonaco();\\nmonaco.editor.onDidCreateEditor(configureEditor);\\n\")), mdx(\"h3\", null, \"2. \\u521D\\u59CB\\u5316\\u4E00\\u4E2A\\u7F16\\u8F91\\u5668\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-js\"\n  }, \"// \\u672C\\u6765\\u662F\\nlet editorOverrides = {\\n  editorService: {\\n    // openEditor: function () {\\n    //   alert(`open editor called!` + JSON.stringify(arguments));\\n    // },\\n    // resolveEditor: function () {\\n    //   alert(`resolve editor called!` + JSON.stringify(arguments));\\n    // }\\n  }\\n}\\n\\nlet options: monaco.editor.IEditorOptions = {\\n  minimap: {\\n    enabled: true,\\n    showSlider: 'always',\\n    renderCharacters: false\\n  },\\n  glyphMargin: true,\\n  lightbulb: {\\n    enabled: true\\n  },\\n  extraEditorClassName: '__ubug_monaco',\\n};\\n\\nconst defaultModel = monaco.editor.createModel('', 'plaintext');\\nconst editor = monaco.editor.create(this.el, { ...options, model: defaultModel }, editorOverrides);\\n\")), mdx(\"p\", null, \"\\u5176\\u4E2D \\u7B2C\\u4E09\\u4E2A\\u53C2\\u6570 OverrideServices \\u76EE\\u7684\\u662F\\u8986\\u76D6\\u5185\\u7F6E\\u7684\\u4E00\\u4E9B\\u670D\\u52A1\\uFF0C\\u6BD4\\u5982\\u8DF3\\u8F6C\\u5230\\u6216\\u8005\\u5F15\\u7528\\u7B49\\u529F\\u80FD\\uFF0C\\u5728\\u67D0\\u4E9B\\u7248\\u672C\\u4E2D\", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/microsoft/monaco-editor/issues/291#issuecomment-450709332\"\n  }, \"\\u53EF\\u80FD\\u4F1A\\u88AB\\u8986\\u76D6\\u5BFC\\u81F4\\u5931\\u6548\"), \"\\uFF0C\\u53EF\\u4EE5\\u901A\\u8FC7\\u76F8\\u5BF9 hack \\u7684\\u65B9\\u5F0F\\u6DFB\\u52A0\\u529F\\u80FD\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-ts\"\n  }, \"\\nfunction hackOverides(editor: monaco.editor.IStandaloneCodeEditor) {\\n  // @ts-ignore\\n  const services = [...editor._instantiationService._parent._services._entries.values()];\\n  const textModelService = services.find((service) => {\\n    const props = Object.getPrototypeOf(service)\\n    return props && 'createModelReference' in props\\n  });\\n\\n  // @ts-ignore\\n  const codeEditorService = editor._codeEditorService;\\n  codeEditorService.openCodeEditor = (input: { resource: monaco.Uri, options: any }) => {\\n    const { resource, options } = input\\n    const file = resource.path;\\n    const range = options.selection;\\n    // Add code here to open the code editor.\\n\\n    const states = window._novus.models.workspace.state\\n    let path = file.replace(states.config.path, '')\\n\\n    commandsPool.writer.openFile.trigger(path, () => {\\n      window._novus.models.writer.state.currentEditor.setSelection(range);\\n      window._novus.models.writer.state.currentEditor.revealLineInCenter(range.startLineNumber);\\n    });\\n  }\\n\\n\\n  textModelService.createModelReference = async (uri: monaco.Uri) => {\\n\\n    const fileManagerModel = window._novus.models[\\\"fileManager\\\"]\\n\\n    const states = window._novus.models.workspace.state\\n    let fileId = uri.path.replace(states.config.path, '')\\n    let model = modelsHolder.models[fileId];\\n\\n    if (!model) {\\n      let file = await fileManagerModel.actions.queryFile(fileId);\\n      const contentsMap = fileManagerModel.state.contentsMap\\n      const content = contentsMap[fileId];\\n      const language = getLang(`.${fileId.split('.').pop()}`)\\n\\n      if (file) {\\n        await fileManagerModel.actions.fetchFileContent(fileId);\\n        modelsHolder.addModel(file.relative, file.path, content, language);\\n        model = modelsHolder.models[fileId];\\n      }\\n    }\\n\\n    const reference = {\\n      load() {\\n        return Promise.resolve(model.model)\\n      },\\n      // in my case, I have nothing to dispose as I just re-use existing resources\\n      dispose() { },\\n      textEditorModel: model.model\\n    }\\n    return {\\n      object: reference,\\n      dispose() { },\\n    };\\n  };\\n}\\n\\nhackOverides(editor);\\n\")), mdx(\"p\", null, \"\\u5728\\u6DFB\\u52A0 LSP \\u529F\\u80FD\\u6216\\u8005\\u672C\\u5730 model \\u8DEF\\u5F84\\u5B8C\\u6574\\u7684\\u60C5\\u51B5\\u4E0B\\uFF0C\\u652F\\u6301\\u8DF3\\u8F6C\\u548C\\u5F15\\u7528\\u67E5\\u770B\\u3002\"), mdx(\"h3\", null, \"3. \\u5206\\u522B\\u50A8\\u5B58 model \\u548C state \\u6765\\u5B9E\\u73B0\\u591A\\u6587\\u4EF6\\u7F16\\u8F91\"), mdx(\"p\", null, \"\\u5728 IDE \\u6982\\u5FF5\\u4E2D\\u4E0D\\u53EF\\u80FD\\u6BCF\\u6B21\\u7F16\\u8F91\\u6587\\u4EF6\\u90FD\\u521B\\u5EFA\\u4E00\\u4E2A editor\\uFF0C\\u6240\\u4EE5\\u63D0\\u4F9B\\u4E86 model \\u548C state \\u7684\\u529F\\u80FD\\u6765\\u50A8\\u5B58\\u6587\\u4EF6\\u7684\\u6A21\\u578B\\u548C\\u72B6\\u6001\\u3002\"), mdx(\"p\", null, \"model \\u8868\\u793A\\u4E00\\u4E2A\\u7F16\\u8F91\\u6587\\u4EF6\\u7684\\u5FEB\\u7167\\uFF0C\\u5305\\u542B\\u6587\\u4EF6\\u4FE1\\u606F\\u3001\\u8BED\\u8A00\\u6807\\u8BB0\\u3001\\u914D\\u7F6E\\u3001\\u88C5\\u9970\\u4FE1\\u606F\\u7B49\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528 getModel \\u548C setModel \\u5207\\u6362\\u4E0D\\u540C\\u7684\\u6587\\u4EF6\\u3002state \\u8868\\u793A\\u89C6\\u56FE\\u4E0A\\u7684\\u72B6\\u6001\\uFF0C\\u6BD4\\u5982\\u5149\\u6807\\u72B6\\u6001\\u3001\\u6EDA\\u52A8\\u4F4D\\u7F6E\\u7B49\\u4FE1\\u606F\\u3002\"), mdx(\"p\", null, \"\\u6839\\u636E\\u8FD9\\u4E24\\u4E2A\\u4FE1\\u606F\\u6765\\u652F\\u6301\\u591A\\u6587\\u4EF6\\u7684\\u7F16\\u8F91\\u548C\\u5207\\u6362\\u529F\\u80FD\\uFF0C\\u6211\\u5728\\u9879\\u76EE\\u4E2D\\u4F7F\\u7528\\u4E86\\u4E00\\u4E2A modelManager \\u6765\\u5355\\u72EC\\u5904\\u7406\\u6587\\u4EF6\\u5185\\u5BB9\\u3001\\u6587\\u4EF6\\u72B6\\u6001\\u3001\\u7F16\\u8F91\\u72B6\\u6001\\u4E4B\\u7C7B\\u7684\\uFF0C\\u53EF\\u4EE5\\u6839\\u636E\\u903B\\u8F91\\u7075\\u6D3B\\u7684\\u591A\\u6587\\u4EF6\\u5207\\u6362\\u3002\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-ts\"\n  }, \"// \\u83B7\\u53D6\\u5E76\\u5B58\\u50A8\\nlet model = this.editor.getModel();\\nlet state = this.editor.saveViewState();\\nmodelsManager.updateModeler({ id: currentTabId, model, state})\\n\\n// \\u6062\\u590D\\nlet targetModel = modelsManager.models[tabId];\\nthis.editor.setModel(targetModel.model);\\nthis.editor.restoreViewState(targetModel.state);\\n\")), mdx(\"h3\", null, \"4. \\u5468\\u8FB9\\u914D\\u7F6E\"), mdx(\"p\", null, \"\\u5E38\\u89C1\\u7684\\u4E00\\u4E9B\\u914D\\u7F6E\\u6BD4\\u5982 \\u7F29\\u8FDB\\u3001\\u7A7A\\u683C\\u3001\\u884C\\u5217\\u9009\\u62E9\\u3001\\u8BED\\u8A00\\u3001\\u6362\\u884C\\u6A21\\u5F0F\\u3001\\u6587\\u4EF6\\u5927\\u5C0F\\u7B49\\u4FE1\\u606F\\uFF0C\\u6BD4\\u5982\\u7F29\\u8FDB\\uFF1A\"), mdx(\"p\", null, mdx(\"figure\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {}\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"283px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/90393f6ae3fe4c91ff41fcb311fc7970/f9369/indent-show.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"9.266409266409267%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAACCAYAAABYBvyLAAAACXBIWXMAAAsSAAALEgHS3X78AAAAkUlEQVQI12NwK17637FgMRhbZi34rxo9HUxrxM38r588Byxulb3gv17SbDA/pHb1f7vcRf91Emf/1wVikBxI3KlgyX/L7IX/GSLadv4Patr2P6x1x3+/+q3/NVKW/ncq2/BfK3Xpf7O81f9dKjYC8Yb/xjkr/5vnr/6fMekAWJ1h1gqwGEjONHfVf1+gmAVQHgDSKFz5bcQTawAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"配置展示\",\n    \"title\": \"配置展示\",\n    \"src\": \"/static/90393f6ae3fe4c91ff41fcb311fc7970/f9369/indent-show.png\",\n    \"srcSet\": [\"/static/90393f6ae3fe4c91ff41fcb311fc7970/ae269/indent-show.png 259w\", \"/static/90393f6ae3fe4c91ff41fcb311fc7970/f9369/indent-show.png 283w\"],\n    \"sizes\": \"(max-width: 283px) 100vw, 283px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"\\u914D\\u7F6E\\u5C55\\u793A\"), \"\\n  \")), mdx(\"p\", null, \"\\u5728\\u72B6\\u6001\\u680F\\u5C55\\u793A\\u90E8\\u5206\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-ts\"\n  }, \"const IndentWidget = () => {\\n  let state = useNovus<TState>((models) => {\\n    const activeId = models.layout.state.layout.dealer.activeId;\\n    return {\\n      activeId: activeId,\\n      activeTab: models.writer.state.tabs[activeId],\\n    };\\n  }, ['workspace', 'writer'])\\n\\n  const model = modelsHolder.models[state.activeId];\\n  if (!model || !state.activeTab || state.activeTab.type !== 'text') return null;\\n  const options = model.model.getOptions();\\n  const space = options.insertSpaces;\\n  const tabSize = options.tabSize;\\n\\n  return <Tooltip title=\\\"\\u4FEE\\u6539\\u7F29\\u8FDB\\\">\\n    <CommandBtn command=\\\"writer.changeIndent\\\">\\n      {`${space ? '\\u7A7A\\u683C' : 'Tab'}: ${space ? tabSize : null}`}\\n    </CommandBtn>\\n  </Tooltip>\\n}\\n\")), mdx(\"p\", null, mdx(\"figure\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {}\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"640px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/e4a91575e872b9464a4cca9d21b1eb64/0cc36/indent-change.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"45.173745173745175%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAYAAAAywQxIAAAACXBIWXMAAAsSAAALEgHS3X78AAABD0lEQVQoz52QTU+EMBRFWU105cIYILQdPoxGWgYzQDUBWoYxUdnorHTH//8V19aOmZUJujjp4r2e3Pu8m7sN7muNsuoMPSqp/0VZKdwal8flDpvnGdU0Y/s6I3o4IJTvCJu3RQQG8nhA+TIjyAp4JK8Qjx+43ls+cVlPOBdPWOUjVnx0728c52d8j4vthKs0hxfHMbpeoVcaWg8QokCSJKCMgbG1gS2CEGogTtg0NaSUKIQwQ4q1WaCUgi3E7kZRdBL2SkGZhG3bgnNxTLaAtWsQm0b2nxU7Yd9/03UdhmGHLMtcwgVV7Z51cM6d0N5LmYRWprVLmabpYuHphsRV/ulusQPf9xEEAcIw/DPW9QW1WAbRTUyemgAAAABJRU5ErkJggg==')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"状态栏点击修改\",\n    \"title\": \"状态栏点击修改\",\n    \"src\": \"/static/e4a91575e872b9464a4cca9d21b1eb64/0cc36/indent-change.png\",\n    \"srcSet\": [\"/static/e4a91575e872b9464a4cca9d21b1eb64/ae269/indent-change.png 259w\", \"/static/e4a91575e872b9464a4cca9d21b1eb64/a4dff/indent-change.png 518w\", \"/static/e4a91575e872b9464a4cca9d21b1eb64/0cc36/indent-change.png 640w\"],\n    \"sizes\": \"(max-width: 640px) 100vw, 640px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"\\u72B6\\u6001\\u680F\\u70B9\\u51FB\\u4FEE\\u6539\"), \"\\n  \")), mdx(\"p\", null, \"\\u70B9\\u51FB\\u7684\\u547D\\u4EE4\\uFF0C\\u652F\\u6301\\u4F7F\\u7528 monaco-editor \\u81EA\\u5E26\\u7684 quickOpen \\u529F\\u80FD\\u5C55\\u793A\\u914D\\u7F6E\\u9009\\u9879\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-ts\"\n  }, \"import { getModel } from '.';\\n\\nconst { QuickOpenModel, QuickOpenEntryGroup } = window.require('vs/base/parts/quickopen/browser/quickOpenModel');\\nconst { BaseEditorQuickOpenAction } = window.require('vs/editor/standalone/browser/quickOpen/editorQuickOpen');\\nconst { matchesFuzzy } = window.require('vs/base/common/filters');\\nconst { Range } = window.require('vs/editor/common/core/range');\\n\\ntype TActionOption = {\\n  withBorder?: boolean\\n  group?: string\\n}\\n\\nfunction getIndentationEditOperations(model: monaco.editor.ITextModel, tabSize: number, tabsToSpaces: boolean) {\\n  if (model.getLineCount() === 1 && model.getLineMaxColumn(1) === 1) { return; }\\n  let spaces = ' '.repeat(tabSize);\\n  let spacesRegExp = new RegExp(spaces, 'gi');\\n  let operations = [];\\n\\n  for (let lineNumber = 1, lineCount = model.getLineCount(); lineNumber <= lineCount; lineNumber++) {\\n    let lastIndentationColumn = model.getLineFirstNonWhitespaceColumn(lineNumber) || model.getLineMaxColumn(lineNumber);\\n    if (lastIndentationColumn === 1) continue;\\n\\n    const originalIndentationRange = new Range(lineNumber, 1, lineNumber, lastIndentationColumn);\\n    const originalIndentation = model.getValueInRange(originalIndentationRange);\\n    const newIndentation = (tabsToSpaces ? originalIndentation.replace(/\\\\t/ig, spaces) : originalIndentation.replace(spacesRegExp, '\\\\t'));\\n    operations.push({\\n      range: originalIndentationRange,\\n      text: newIndentation\\n    });\\n  }\\n  model.applyEdits(operations);\\n}\\n\\nclass DemoActionCommandEntry extends QuickOpenEntryGroup {\\n  constructor(highlights: any, editor: monaco.editor.IStandaloneCodeEditor, option: TActionOption) {\\n    super();\\n    this.editor = editor;\\n    this.option = option;\\n    this.withBorder = option.withBorder;\\n    return this;\\n  }\\n  getLabel =  () => this.option.label;\\n  getAriaLabel =  () => this.option.label;\\n  getDetail =  () => this.option.desc;\\n  getGroupLabel =  () => this.option.group || '';\\n\\n  run = (mode: number) => {\\n    if (mode === 1 /* OPEN */) {\\n      var model = getModel(this.editor);\\n\\n      if (this.option.operate[0] === 0) {\\n        if (this.option.operate[1] === 0) {\\n          model.updateOptions({\\n            tabSize: this.option.operate[2],\\n            insertSpaces: true\\n          });\\n        } else {\\n          model.updateOptions({\\n            insertSpaces: false\\n          });\\n        }\\n      } else {\\n        let modelOpts = model.getOptions();\\n        // \\u8F6C\\u6362 model, builder, tabSize, tabsToSpaces\\n        getIndentationEditOperations(model, modelOpts.tabSize, this.option.operate[1] === 0)\\n      }\\n\\n      return true;\\n    }\\n    return false;\\n  };\\n}\\n\\nexport class IndentCommandAction extends BaseEditorQuickOpenAction {\\n  constructor() {\\n    super(\\\"ubug: \\u4FEE\\u6539\\u7F29\\u8FDB\\\", {\\n      id: 'editor.ubug.changeIndent',\\n      label: \\\"ubug: \\u4FEE\\u6539\\u7F29\\u8FDB\\\",\\n      alias: 'ubug: \\u4FEE\\u6539\\u7F29\\u8FDB',\\n      // menuOpts: {}\\n      menuOpts: null\\n    })\\n    return this;\\n  }\\n  run = function (accessor: any, editor: monaco.editor.IStandaloneCodeEditor) {\\n    this._show(this.getController(editor), {\\n      getModel: function (value: string) {\\n        var entries = [\\n          {\\n            label: '\\u4F7F\\u7528 2 \\u7A7A\\u683C\\u7F29\\u8FDB',\\n            group: '\\u89C6\\u56FE',\\n            desc: 'Indent Using 2 Spaces',\\n            operate: [0, 0, 2] // insertSpaces, space nums\\n          },\\n          {\\n            label: '\\u4F7F\\u7528 4 \\u7A7A\\u683C\\u7F29\\u8FDB',\\n            desc: 'Indent Using 4 Spaces',\\n            operate: [0, 0, 4]\\n          },\\n          {\\n            label: '\\u4F7F\\u7528 Tab \\u7F29\\u8FDB',\\n            desc: 'Indent Using Tab',\\n            operate: [0, 1, 2]\\n          },\\n          {\\n            label: '\\u4F7F\\u7528\\u7A7A\\u683C\\u8F6C\\u6362\\u5DF2\\u6709\\u5185\\u5BB9',\\n            group: '\\u8F6C\\u6362',\\n            desc: 'Indent Using 2 Spaces',\\n            operate: [1, 0], // insertSpaces, space nums\\n            withBorder: true\\n          },\\n          {\\n            label: '\\u4F7F\\u7528 Tab \\u8F6C\\u6362\\u5DF2\\u6709\\u5185\\u5BB9',\\n            desc: 'Indent Using Tab',\\n            operate: [1, 1]\\n          },\\n        ];\\n        var models = entries.filter(e => (matchesFuzzy(value, e.label) || matchesFuzzy(value, e.desc))).map((e) => {\\n          return new DemoActionCommandEntry(value, editor, e);\\n        })\\n        return new QuickOpenModel(models);\\n      },\\n      getAutoFocus: function (searchValue: string) {\\n        return {\\n          autoFocusFirstEntry: searchValue.length > 0,\\n          autoFocusIndex: getModel(editor).getOptions().defaultEOL - 1\\n        };\\n      }\\n    });\\n  };\\n}\\n\")), mdx(\"p\", null, \"\\u8FD9\\u4E2A\\u76F8\\u5F53\\u4E8E\\u662F\\u5C06\\u600E\\u4E48\\u5728 monaco-editor \\u7684\\u83DC\\u5355\\u4E2D\\u6DFB\\u52A0\\u81EA\\u5B9A\\u4E49\\u7684\\u9009\\u9879\\u5217\\u8868\\uFF0C\\u4E0D\\u9700\\u8981\\u81EA\\u5DF1\\u5199\\u5177\\u4F53\\u7684\\u903B\\u8F91\\uFF0C\\u529F\\u80FD\\u7684\\u63D0\\u4F9B\\u662F monaco-editor \\u81EA\\u5E26\\u7684\\uFF0C\\u975E\\u5E38\\u6709\\u8DA3\\u3002\"), mdx(\"p\", null, \"\\u5176\\u4ED6\\u7684\\u6BD4\\u5982 \\u8BED\\u8A00\\u9009\\u53D6\\u3001\\u7F16\\u7801\\u6A21\\u5F0F\\u90FD\\u53EF\\u4EE5\\u7528\\u8FD9\\u79CD\\u65B9\\u5F0F\\u6269\\u5C55\\u3002\"), mdx(\"h3\", null, \"5. \\u5176\\u4ED6\\u5468\\u8FB9\"), mdx(\"p\", null, \"LSP \\u96C6\\u6210\\u3001DirtyDiff \\u96C6\\u6210\\u3001TextMate \\u9AD8\\u4EAE\\u96C6\\u6210\\u5728\\u540E\\u9762\\u90FD\\u4F1A\\u6DF1\\u5165\\u8BF4\\u3002\"), mdx(\"h2\", null, \"\\u4E09\\u3001\\u6269\\u5C55\\u96C6\\u6210\"), mdx(\"p\", null, \"\\u96C6\\u6210\\u9700\\u8981\\u6D89\\u53CA\\u7684\\u4E1C\\u897F\\u5305\\u62EC\\u6CE8\\u518C\\u6269\\u5C55\\u3001\\u6CE8\\u518C\\u6570\\u636E\\u6A21\\u578B\\u3001\\u6CE8\\u518C command \\u52A8\\u4F5C\\u5E93\\u3001\\u6CE8\\u518C\\u72B6\\u6001\\u680F\\u3002\"), mdx(\"p\", null, \"monaco-editor \\u989D\\u5916\\u9700\\u8981\\u505A\\u7684\\u6709\\u7F16\\u8F91\\u5668\\u914D\\u7F6E\\u3001model \\u914D\\u7F6E\\u3001model \\u548C state \\u72B6\\u6001\\u62C6\\u5206\\u3001DirtyDiff \\u548C Peek \\u65B9\\u6848\\u3001\\u5F15\\u7528\\u548C\\u8DF3\\u8F6C\\u65B9\\u6848\\u3001\\u591A\\u8BED\\u8A00\\u5207\\u6362\\u4EE5\\u53CA\\u7F29\\u8FDB\\u7B49\\u9009\\u9879\\u3001textmate \\u9AD8\\u4EAE\\u65B9\\u6848\\u3001LSP \\u65B9\\u6848\\u7B49\"), mdx(\"h3\", null, \"1. \\u6269\\u5C55\\u6CE8\\u518C\"), mdx(\"p\", null, \"\\u5728\\u5185\\u6838\\u642D\\u5EFA\\u8D77\\u6765\\u4E4B\\u540E\\uFF0C\\u80FD\\u591F\\u901A\\u8FC7\\u62D3\\u5C55\\u7684\\u5F62\\u5F0F\\u5728\\u89C6\\u56FE\\u4E0A\\u7684\\u67D0\\u4E2A\\u533A\\u57DF\\u6CE8\\u518C\\u5185\\u5BB9\\uFF0C\\u6240\\u4EE5\\u6211\\u4EEC\\u53EA\\u9700\\u8981\\u5199\\u4E00\\u4E2A\\u62D3\\u5C55\\uFF0C\\u7136\\u540E\\u6309\\u7167\\u914D\\u7F6E\\u7EA6\\u5B9A\\u5199\\u4E0A\\u903B\\u8F91\\u5C31\\u80FD\\u5C06\\u7F16\\u8F91\\u5668\\u96C6\\u6210\\u8FDB\\u53BB\\u4E86\\u3002\"), mdx(\"p\", null, \"\\u7B80\\u5355\\u793A\\u4F8B\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-ts\"\n  }, \"import React from 'react';\\n\\nimport model from \\\"./model\\\";\\nimport { Extension } from '..';\\nimport Novus from '../../models';\\n\\nimport Writer from \\\"./Component\\\";\\nimport WriterTab from \\\"./Component/tab\\\";\\n\\nimport { registerStatusBar } from \\\"@utils/statusBar\\\";\\n\\nimport LineWidget     from \\\"./statusBar/LineWidget\\\";\\nimport IndentWidget   from \\\"./statusBar/IndentWidget\\\";\\nimport EncodeWidget   from \\\"./statusBar/EncodeWidget\\\";\\nimport EOLWidget      from \\\"./statusBar/EOLWidget\\\";\\nimport LanguageWidget from \\\"./statusBar/LanguageWidget\\\";\\n\\n// monaco editor addons\\nimport initEditorPlugins from './monacoPlugins/index';\\nimport configureMonaco from './afterMonaco/index';\\nimport configureEditor from './afterEditor/index';\\n\\ninitEditorPlugins();\\n\\nimport { commands } from \\\"./commands\\\";\\n\\nexport default (novus: Novus): Extension => {\\n  novus.bindModel(model);\\n\\n  commandsCenter.registerCommands(\\\"writer\\\", commands);\\n\\n  registerStatusBar({\\n    lineWidget:     { com: LineWidget },\\n    indentWidget:   { com: IndentWidget },\\n    encodeWidget:   { com: EncodeWidget },\\n    EOLWidget:      { com: EOLWidget },\\n    LanguageWidget: { com: LanguageWidget },\\n  });\\n\\n  return {\\n    id: 'writer',\\n    useSticky: 'writer-dealer',\\n    panel: Writer,\\n    tab: WriterTab,\\n    init: () => {\\n      // config Monaco and every editor\\n      configureMonaco();\\n      monaco.editor.onDidCreateEditor(configureEditor);\\n    },\\n  }\\n}\\n\")), mdx(\"p\", null, \"\\u4E0A\\u9762\\u7684\\u4EE3\\u7801\\u8868\\u793A\\u6CE8\\u518C\\u4E00\\u4E2A \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"writer\"), \" \\u7684\\u6269\\u5C55\\uFF0Ccommands \\u91CC\\u9762\\u63D0\\u4F9B\\u6253\\u5F00 tab \\u7684\\u65B9\\u6CD5\\uFF0C\\u7136\\u540E\\u5185\\u6838\\u6846\\u67B6\\u6E32\\u67D3\\u7684\\u65F6\\u5019\\uFF0C\\u4F1A\\u6839\\u636E tab \\u7684\\u7C7B\\u578B\\u8C03\\u7528\\u8FD9\\u4E2A writer \\u6765\\u6E32\\u67D3\\u754C\\u9762\\u3002\\u540C\\u65F6\\u8FD8\\u6CE8\\u518C\\u4E86\\u5E95\\u90E8\\u7684\\u72B6\\u6001\\u680F\\uFF0C\\u80FD\\u591F\\u6839\\u636E\\u5F53\\u524D\\u6253\\u5F00\\u7684\\u6587\\u4EF6\\u663E\\u793A\\u8F85\\u52A9\\u6570\\u636E\\u3002\"), mdx(\"h3\", null, \"2. \\u6570\\u636E\\u6A21\\u578B\"), mdx(\"p\", null, \"\\u4E0A\\u4E00\\u7BC7\\u6587\\u7AE0\\u5DF2\\u7ECF\\u8BF4\\u660E\\u4E86\\u6570\\u636E\\u6A21\\u578B\\u5728\\u8FD9\\u4E2A\\u9879\\u76EE\\u4E2D\\u7684\\u7528\\u6CD5\\uFF0C\\u8FD9\\u4E2A\\u6570\\u636E\\u6A21\\u578B\\u4FDD\\u5B58\\u5F53\\u524D\\u7684\\u5168\\u90E8\\u6253\\u5F00\\u6587\\u4EF6\\u4EE5\\u53CA\\u76F8\\u5173\\u64CD\\u4F5C\\u65B9\\u6CD5\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-ts\"\n  }, \"type TabConfig = {\\n  id: string;           // id \\u552F\\u4E00\\u6807\\u8BC6\\n  preview: boolean;     // \\u662F\\u5426\\u662F\\u9884\\u89C8\\u72B6\\u6001\\n  name: string;         // \\u6587\\u4EF6\\u540D\\n  type: string;         // \\u6587\\u4EF6\\u7C7B\\u578B\\uFF08\\u53EF\\u4EE5\\u662F\\u6587\\u672C\\u6587\\u4EF6\\u3001\\u56FE\\u7247\\u3001HTML \\u9884\\u89C8\\uFF09\\n  file: TFile;          // \\u6587\\u4EF6\\u7684\\u7C7B\\u578B\\uFF08\\u8FD9\\u4E2A\\u5728\\u6587\\u4EF6\\u7BA1\\u7406\\u5668\\u4E2D\\u5B9A\\u4E49\\uFF0C\\u9644\\u5E26\\u6587\\u4EF6\\u7684\\u5730\\u5740\\u3001\\u76F8\\u5BF9\\u5730\\u5740\\u3001\\u5927\\u5C0F\\u3001\\u4FEE\\u6539\\u4E8B\\u4EF6\\u3001\\u7B80\\u5355 git \\u4FE1\\u606F\\u7B49\\uFF09\\n  language: string;     // \\u6587\\u672C\\u6587\\u4EF6\\u7684\\u8BDD\\uFF0C\\u4EE3\\u7801\\u8BED\\u8A00\\n  changed: boolean;     // \\u6807\\u8BC6\\u5F53\\u524D\\u7F16\\u8F91\\u5668\\u7684\\u5185\\u5BB9\\u662F\\u5426\\u6709\\u6539\\u52A8\\n  content: string;      // \\u6682\\u5B58\\u5F53\\u524D tab \\u7684\\u6587\\u4EF6\\u5185\\u5BB9\\n  status: number;       // \\u6587\\u4EF6\\u72B6\\u6001\\n  modelReady: boolean;  // \\u662F\\u5426\\u5DF2\\u7ECF\\u6CE8\\u518C\\u4E86 editor \\u7684 model\\n  specialType?: string; // \\u662F\\u5426\\u662F\\u7279\\u6B8A\\u7C7B\\u578B\\uFF0C\\u9700\\u8981\\u7279\\u6B8A\\u6E32\\u67D3\\n}\\n\\ntype Tabs = {\\n  [index: string]: TTab;\\n}\\n\\nexport type TTabs = ImmutableObjectMixin<Tabs> & Tabs;\\nexport type TTab = ImmutableObjectMixin<TabConfig> & TabConfig;\\n\\nexport interface IWriterState {\\n  tabs: TTabs,\\n  currentEditor: monaco.editor.IStandaloneCodeEditor,\\n}\\n\\nclass WriterModel extends NovusBaseModel<IWriterState> {\\n  namespace = 'writer'\\n  constructor(){\\n    super()\\n    this.state = {\\n      tabs: Immutable({}), // \\u4F7F\\u7528\\u4E0D\\u53EF\\u53D8\\u6570\\u636E\\u7C7B\\u578B\\uFF0C\\u4F7F\\u5F97\\u6DF1\\u5C42\\u5BF9\\u8C61\\u6539\\u53D8\\u4E5F\\u80FD\\u89E6\\u53D1\\u66F4\\u65B0\\u72B6\\u6001\\n      currentEditor: null,\\n    }\\n  }\\n\\n  actions = {\\n    // ---------- tabs\\n    notifyTabClose: (tabId: string) => {\\n      // ...\\n    },\\n    editorChange: (editor: monaco.editor.IStandaloneCodeEditor) => {\\n      this.setState({ currentEditor: editor })\\n    },\\n    updateTab: <K extends keyof TabConfig>(tabId: string, data: Pick<TabConfig, K>) => {\\n      // ...\\n    },\\n    previewConfirm: (tabId: string) => {\\n      // ...\\n    },\\n    openTab: async (file: TFile, skipPreview: boolean = false) => {\\n      // ...\\n      let tab = generateTab(file, skipPreview);\\n      if (tab) {\\n        // ...\\n        await this.getModel('layout').actions.modifyPanels({\\n          adds: [\\n            {\\n              component: 'writer',\\n              id: fileId,\\n              data: { tabId: fileId },\\n              stackPosition: 'dealer'\\n            }\\n          ],\\n          removes\\n        });\\n      }\\n    },\\n  }\\n};\\nexport default new WriterModel();\\n\")), mdx(\"h3\", null, \"3. command \\u6253\\u5F00\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-ts\"\n  }, \"import { getSpecialType } from \\\"./specialEditors\\\";\\nimport Immutable from \\\"seamless-immutable\\\";\\n\\nimport { TFile, TFileRaw } from \\\"../FileManager/model\\\";\\n\\nexport const commands = {\\n  gotoLine: {\\n    trigger: () => {\\n      // ...\\n    }\\n  },\\n  changeIndent: {\\n    trigger: () => {\\n      // ...\\n    }\\n  },\\n  chooseLanguage: {\\n    trigger: () => {\\n      // ...\\n    }\\n  },\\n  showSourceCode: {\\n    label: \\\"\\u67E5\\u770B\\u6E90\\u4EE3\\u7801\\\",\\n    trigger: () => {\\n      // ...\\n    }\\n  },\\n  openFile: {\\n    trigger: async (\\n      fileRelative: string,\\n      cb?: Function,\\n      skipPreview?: boolean\\n    ) => {\\n        window._novus.models[\\\"writer\\\"].actions.previewConfirm(fileId);\\n        // or ...\\n        await window._novus.models.layout.actions.activePanel(fileId);\\n        // or ...\\n        window._novus.models[\\\"writer\\\"].actions.openTab(file, skipPreview);\\n      }\\n    }\\n  },\\n  createUntitledFile: {\\n    key: [\\\"ctrl+n\\\"],\\n    label: \\\"\\u65B0\\u5EFA\\u6587\\u4EF6\\\",\\n    trigger: () => {\\n      // ...\\n    }\\n  }\\n};\\n\")));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"isCreatedByStatefulCreatePages":false,"id":"1eb865bd-0120-53d7-84cc-6727f56add73","prev":{"fileAbsolutePath":"E:/u-codes/storybok/content/blog/workpad/workpad-part-4.md","id":"9f8935ba-d981-525a-b4fe-5a48a8c00e99","parent":{"name":"workpad-part-4","sourceInstanceName":"blog"},"excerpt":"一、为什么要终端 程序员对电脑的控制大部分还是需要终端的帮助，运行服务、执行代码、调试等等操作都可以在终端中完成，甚至编辑功能也可以在终端中实现，运行环境的管理、文件、程序等能在终端中操作。一般意义上，IDE 和 编辑器的最大区别也是有终端功能的支持。所以日常开发终端是必不可少的一个工具，而在 web 中也已经有很成熟的工具 Xterm.js。 二、基础概念 TTY、terminal、Shell、pty、bash、ssh 都是什么？ tty unix…","fields":{"title":"🌋 WebIDE 的开发记录其四（命令行终端）","slug":"/blog/workpad-part-4","description":"WorkPad 是一个非常有意思的项目，花了很多空闲时间打磨，光基础架构的重构就好几遍，现在略微记录下开发的思路和想法。本文为第四篇文章，谈谈命令行终端是怎么集成的。","date":"2020-01-23","redirects":null,"datetime":"2020-01-23 21:45:01","categories":["webide"],"series":"WebIDE 的开发记录","tags":["思考","整理","WorkPad","WebIDE","云开发","在线编辑器"],"status":"online"},"frontmatter":{"published":null,"tags":["思考","整理","WorkPad","WebIDE","云开发","在线编辑器"],"theme":null,"slug":"workpad-part-4","date":"2020-01-23 21:45:01"},"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n  \"slug\": \"workpad-part-4\",\n  \"title\": \"🌋 WebIDE 的开发记录其四（命令行终端）\",\n  \"date\": \"2020-01-23 21:45:01\",\n  \"author\": \"Ubug\",\n  \"description\": \"WorkPad 是一个非常有意思的项目，花了很多空闲时间打磨，光基础架构的重构就好几遍，现在略微记录下开发的思路和想法。本文为第四篇文章，谈谈命令行终端是怎么集成的。\",\n  \"series\": \"WebIDE 的开发记录\",\n  \"categories\": [\"webide\"],\n  \"tags\": [\"思考\", \"整理\", \"WorkPad\", \"WebIDE\", \"云开发\", \"在线编辑器\"],\n  \"banner\": \"./WorkPad-demo.png\"\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n  console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n  return mdx(\"div\", props);\n};\nconst WithFigcaption = makeShortcode(\"WithFigcaption\");\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n      components\n    } = _ref,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h2\", null, \"\\u4E00\\u3001\\u4E3A\\u4EC0\\u4E48\\u8981\\u7EC8\\u7AEF\"), mdx(\"p\", null, \"\\u7A0B\\u5E8F\\u5458\\u5BF9\\u7535\\u8111\\u7684\\u63A7\\u5236\\u5927\\u90E8\\u5206\\u8FD8\\u662F\\u9700\\u8981\\u7EC8\\u7AEF\\u7684\\u5E2E\\u52A9\\uFF0C\\u8FD0\\u884C\\u670D\\u52A1\\u3001\\u6267\\u884C\\u4EE3\\u7801\\u3001\\u8C03\\u8BD5\\u7B49\\u7B49\\u64CD\\u4F5C\\u90FD\\u53EF\\u4EE5\\u5728\\u7EC8\\u7AEF\\u4E2D\\u5B8C\\u6210\\uFF0C\\u751A\\u81F3\\u7F16\\u8F91\\u529F\\u80FD\\u4E5F\\u53EF\\u4EE5\\u5728\\u7EC8\\u7AEF\\u4E2D\\u5B9E\\u73B0\\uFF0C\\u8FD0\\u884C\\u73AF\\u5883\\u7684\\u7BA1\\u7406\\u3001\\u6587\\u4EF6\\u3001\\u7A0B\\u5E8F\\u7B49\\u80FD\\u5728\\u7EC8\\u7AEF\\u4E2D\\u64CD\\u4F5C\\u3002\\u4E00\\u822C\\u610F\\u4E49\\u4E0A\\uFF0CIDE \\u548C \\u7F16\\u8F91\\u5668\\u7684\\u6700\\u5927\\u533A\\u522B\\u4E5F\\u662F\\u6709\\u7EC8\\u7AEF\\u529F\\u80FD\\u7684\\u652F\\u6301\\u3002\\u6240\\u4EE5\\u65E5\\u5E38\\u5F00\\u53D1\\u7EC8\\u7AEF\\u662F\\u5FC5\\u4E0D\\u53EF\\u5C11\\u7684\\u4E00\\u4E2A\\u5DE5\\u5177\\uFF0C\\u800C\\u5728 web \\u4E2D\\u4E5F\\u5DF2\\u7ECF\\u6709\\u5F88\\u6210\\u719F\\u7684\\u5DE5\\u5177 Xterm.js\\u3002\"), mdx(\"div\", {\n    style: {\n      display: 'flex',\n      justifyContent: 'center'\n    }\n  }, mdx(WithFigcaption, {\n    title: \"\\u5728\\u7EBF IDE \\u9879\\u76EE\\u4E2D\\u96C6\\u6210\\u7EC8\\u7AEF\\u7684\\u6548\\u679C\",\n    mdxType: \"WithFigcaption\"\n  }, mdx(\"video\", {\n    autoPlay: true,\n    loop: true,\n    controls: true,\n    style: {\n      maxWidth: '100%'\n    }\n  }, mdx(\"source\", {\n    src: \"https://fdb.ubug.io/storybook-videos/term.mp4\",\n    type: \"video/mp4\"\n  })))), mdx(\"h2\", null, \"\\u4E8C\\u3001\\u57FA\\u7840\\u6982\\u5FF5\"), mdx(\"p\", null, \"TTY\\u3001terminal\\u3001Shell\\u3001pty\\u3001bash\\u3001ssh \\u90FD\\u662F\\u4EC0\\u4E48\\uFF1F\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"tty unix\\u7CFB\\u7EDF\\u4E2D\\u8868\\u793A\\u4E3A\\u53EF\\u4EE5\\u8F93\\u5165\\u8F93\\u51FA\\u7684\\u8BBE\\u5907\\uFF0C\\u73B0\\u5728\\u8BF4\\u7684\\u6BD4\\u8F83\\u591A\\u7684\\u662F\\u865A\\u62DF\\u7EC8\\u7AEF\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"terminal \\u8868\\u793A\\u6587\\u672C\\u7684\\u8F93\\u5165\\u8F93\\u51FA\\u73AF\\u5883\\uFF0C\\u4E00\\u4E2A\\u8F93\\u5165\\u548C\\u663E\\u793A\\u8BBE\\u5907\\u7684\\u6982\\u5FF5\\uFF0C\\u8868\\u793A\\u6211\\u4EEC\\u80FD\\u5728\\u7EC8\\u7AEF\\u4E2D\\u8F93\\u5165\\uFF0C\\u7CFB\\u7EDF\\u80FD\\u5728\\u7EC8\\u7AEF\\u4E2D\\u8F93\\u51FA\\uFF0C\\u5F88\\u591A\\u65F6\\u5019\\u4E5F\\u5C31\\u662F\\u8BF4 tty\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Shell \\u662F\\u4E00\\u4E2A\\u547D\\u4EE4\\u884C\\u89E3\\u91CA\\u5668\\uFF0C\\u662F\\u4E00\\u4E2A\\u8F6F\\u4EF6\\uFF0C\\u6839\\u636E\\u6211\\u4EEC\\u5728 terminal \\u7684\\u8F93\\u5165\\u6765\\u8FD0\\u884C\\u7A0B\\u5E8F\\u5E76\\u5C06\\u8F93\\u51FA\\u4EA4\\u7ED9 terminal\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"pty \\u662F \\u865A\\u62DF\\u7EC8\\u7AEF \\u7684\\u6982\\u5FF5\\uFF0C\\u8868\\u793A\\u901A\\u8FC7\\u6A21\\u62DF\\u4E00\\u4E2A\\u8F93\\u5165\\u8F93\\u51FA\\u7684\\u903B\\u8F91\\u63D0\\u4F9B\\u7C7B\\u4F3C tty \\u7684\\u5DE5\\u4F5C\\u673A\\u5236\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"bash \\u662F Shell \\u7A0B\\u5E8F\\u7684\\u4E00\\u79CD\\uFF0C\\u9664\\u6B64\\u4E4B\\u5916\\u8FD8\\u6709 sh\\u3001zsh \\u7B49\\uFF0C\\u8D1F\\u8D23\\u89E3\\u91CA\\u6267\\u884C\\u7EC8\\u7AEF\\u7684\\u5B57\\u7B26\\uFF0C\\u5E76\\u8C03\\u7528\\u7A0B\\u5E8F\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"ssh \\u662F\\u8FDC\\u7A0B\\u4F20\\u8F93\\u534F\\u8BAE\\uFF0C\\u5141\\u8BB8\\u7EC8\\u7AEF\\u901A\\u8FC7\\u8FD9\\u4E2A\\u534F\\u8BAE\\u8FDE\\u63A5\\u670D\\u52A1\\u7AEF\\uFF0C\\u7136\\u540E sshd \\u7A0B\\u5E8F\\u63A5\\u6536\\u6570\\u636E\\u4EA4\\u7ED9 tty / pty\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u8FD8\\u6709 ptmx\\u3001pts\\u3001tmux \\u4E4B\\u7C7B\\u7684\\u6982\\u5FF5\\u548C\\u8FD9\\u65E0\\u5173\\u5C31\\u4E0D\\u6DF1\\u5165\\u4E86\")), mdx(\"p\", null, \"\\u6BD4\\u5982 node-pty \\u901A\\u8FC7\\u5BF9\\u8FDB\\u7A0B\\u7684\\u6302\\u8F7D\\uFF0C\\u63D0\\u4F9B\\u4E00\\u4E2A\\u8F93\\u5165\\u8F93\\u51FA\\u6765\\u6A21\\u62DF\\u7EC8\\u7AEF\\u7684\\u63A5\\u5165\\u3002\"), mdx(\"p\", null, \"\\u7528 websocket \\u6765\\u521B\\u5EFA\\u4E00\\u4E2A\\u8FDE\\u63A5\\u670D\\u52A1\\u7AEF\\u548C\\u5BA2\\u6237\\u7AEF\\u7684\\u901A\\u9053\\uFF0C\\u5C06\\u5BA2\\u6237\\u7AEF\\u7684\\u8F93\\u5165\\u4EA4\\u7ED9 node-pty \\uFF0C\\u5C06 node-pty \\u7684\\u8F93\\u51FA\\u4EA4\\u7ED9\\u5BA2\\u6237\\u7AEF\"), mdx(\"p\", null, \"Xterm.js \\u5728\\u5BA2\\u6237\\u7AEF\\u5B9E\\u73B0\\u4E00\\u4E2A\\u7C7B\\u4F3C \\u7EC8\\u7AEF\\u7684\\u754C\\u9762\\uFF0C\\u7136\\u540E\\u53EF\\u4EE5\\u63A5\\u6536\\u670D\\u52A1\\u7AEF\\u7684\\u8F93\\u51FA\\u4F5C\\u4E3A\\u5BA2\\u6237\\u7AEF\\u8F93\\u51FA\\u663E\\u793A\\uFF0C\\u76F8\\u5E94\\u7528\\u6237\\u7684\\u8F93\\u5165\\u80FD\\u591F\\u4F20\\u7ED9\\u670D\\u52A1\\u7AEF\\u4F5C\\u4E3A\\u8F93\\u5165\\u3002\"), mdx(\"p\", null, \"\\u6700\\u7EC8\\u4E5F\\u5C31\\u5B8C\\u6210\\u4E86\\u6574\\u4E2A\\u7EC8\\u7AEF\\u529F\\u80FD\\u7684\\u6A21\\u62DF\\u3002\"), mdx(\"p\", null, mdx(\"figure\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {}\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"958px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/e425ecabd045bc5c9d0fd4e844fac542/37bc7/term-process.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"27.413127413127413%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAFCAYAAABFA8wzAAAACXBIWXMAAAsSAAALEgHS3X78AAABH0lEQVQY0z2QTWvCUBBFH34sXIuIkqoJCi6qlSQSmiaxAUHFxBgDSSDtquD//wenmQft4jLz5g2Xe0bZto3v+0jdbDbsdjvde56H67o4jqO1XC61VqsVpmkSxzHX65UgCEiSlPP5zPF4RG23W6bTqV42DIPZbKb7v9l8Pme9XjOZTOh0OiiltBzH5vl8cjqdSNOUoijIsgyVJAn3+52qqsjznKZpqOuay+WiE8hM3o/HA9mVeRCGeP4Hzdc3n4eDNhIPkTJNS2NIEkkkmIK93+91lXRRFBG2JqPRiMFgQL/XI3Hf+KlLguhA3hqVZcntdkMZxovGGQ6HjMfjf3PLslgsFvpPbiun6Ha79Pp9ui1y5bxSxCHvQUjWGgmyEP0CZgygr+cz4mUAAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"终端与容器进程的对应\",\n    \"title\": \"终端与容器进程的对应\",\n    \"src\": \"/static/e425ecabd045bc5c9d0fd4e844fac542/37bc7/term-process.png\",\n    \"srcSet\": [\"/static/e425ecabd045bc5c9d0fd4e844fac542/ae269/term-process.png 259w\", \"/static/e425ecabd045bc5c9d0fd4e844fac542/a4dff/term-process.png 518w\", \"/static/e425ecabd045bc5c9d0fd4e844fac542/37bc7/term-process.png 958w\"],\n    \"sizes\": \"(max-width: 958px) 100vw, 958px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"\\u7EC8\\u7AEF\\u4E0E\\u5BB9\\u5668\\u8FDB\\u7A0B\\u7684\\u5BF9\\u5E94\"), \"\\n  \")), mdx(\"h2\", null, \"\\u4E09\\u3001\\u96C6\\u6210\"), mdx(\"p\", null, \"Xterm \\u7684\\u96C6\\u6210\\u6CA1\\u82B1\\u591A\\u957F\\u65F6\\u95F4\\uFF0C\\u5F88\\u7B80\\u5355\\uFF0C\\u4E0D\\u8FC7\\u6280\\u672F\\u9009\\u578B\\u6F14\\u8FDB\\uFF0C\\u52A0\\u4E0A\\u5C0F\\u529F\\u80FD\\u4F18\\u5316\\u8FD8\\u662F\\u82B1\\u4E86\\u633A\\u591A\\u7CBE\\u529B\\u3002\"), mdx(\"h3\", null, \"1. \\u7B2C\\u4E00\\u7248\"), mdx(\"p\", null, \"\\u7B2C\\u4E00\\u7248\\u662F\\u901A\\u8FC7 node-pty \\u73B0\\u6210\\u7684 demo \\u76F4\\u63A5\\u8FD0\\u884C\\uFF0C\\u6548\\u679C\\u5F88\\u4E0D\\u9519\\u3002\"), mdx(\"p\", null, \"server \\u7AEF\\u7684\\u90E8\\u5206\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-ts\"\n  }, \"const os = require('os');\\nconst pty = require('node-pty');\\nconst app = require('express')();\\nconst http = require('http').createServer(app);\\nconst io = require('socket.io')(http);\\n\\n// \\u901A\\u8FC7\\u6302\\u8F7D process \\u6765\\u6A21\\u62DF\\u7EC8\\u7AEF\\u7A0B\\u5E8F\\nconst shell = os.platform() === 'win32' ? 'powershell.exe' : 'bash';\\nconst ptyProcess = pty.spawn(shell, [], {\\n  name: 'xterm-demo',\\n  cols: 80,\\n  rows: 30,\\n  cwd: process.env.HOME,\\n  env: process.env\\n});\\n\\n// \\u901A\\u8FC7 socket.io \\u6765\\u8F93\\u5165\\u8F93\\u51FA\\nio.on('connection', (socket) => {\\n  socket.on('_term_write_in', (msg) => {\\n    ptyProcess.write(`${msg}\\\\r`);\\n  });\\n  socket.on('_term_resize', (msg) => {\\n    ptyProcess.resize(msg.w, msg.h);\\n  });\\n  ptyProcess.on('data', function(data) {\\n    socket.emit('_term_write_out', data);\\n  });\\n});\\n\\n// \\u5F00\\u542F server\\napp.get('/', (req, res) => {\\n  res.sendFile(__dirname + '/index.html');\\n});\\nhttp.listen(3000, () => {\\n  console.log('listening on *:3000');\\n});\\n\")), mdx(\"p\", null, \"client \\u7684\\u90E8\\u5206\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-ts\"\n  }, \"import io from 'socket.io-client';\\n\\n// \\u5F00\\u542F ws client\\uFF0Csocket.io \\u4E0D\\u9700\\u8981\\u5173\\u5FC3\\u91CD\\u8FDE\\u548C\\u590D\\u6742\\u6570\\u636E\\u7C7B\\u578B\\u7B49\\u5904\\u7406\\nconst socket = io('http://localhost');\\n\\n// \\u5F00\\u542F\\u7EC8\\u7AEF\\u7ED1\\u5B9A\\u5230\\u89C6\\u56FE\\nconst term = new Terminal();\\nterm.open(document.getElementById('terminal'));\\n\\n// \\u8FDE\\u63A5\\u7EC8\\u7AEF\\u548C ws \\u6570\\u636E\\u901A\\u9053\\nsocket.on('connect', () => {\\n  socket.on('_term_write_out', (msg) => {\\n    term.write(msg)\\n  });\\n  term.onData((data) => {\\n    socket.emit('data', data)\\n  })\\n});\\n\")), mdx(\"h3\", null, \"2. \\u7B2C\\u4E8C\\u7248 Docker\"), mdx(\"p\", null, \"node-pty \\u662F\\u5728\\u673A\\u5668\\u672C\\u8EAB\\u6267\\u884C\\u7684\\uFF0C\\u548C server \\u96C6\\u6210\\u5728\\u4E00\\u8D77\\uFF0C\\u4E0D\\u662F\\u7279\\u522B\\u5E72\\u51C0\\uFF0C\\u540E\\u6765\\u52A0\\u5165 docker \\u6280\\u672F\\u6808\\u7684\\u65F6\\u5019\\u5C31\\u6CA1\\u529E\\u6CD5\\u4F7F\\u7528\\u4E86\\uFF0C\\u9700\\u8981\\u5C06\\u7EC8\\u7AEF\\u670D\\u52A1\\u4ECE docker \\u4E2D\\u5F15\\u5165\\uFF0C\\u597D\\u5728 docker \\u672C\\u8EAB\\u53EF\\u4EE5\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"exec\"), \" \\u652F\\u6301\\u8FD9\\u4E2A\\u529F\\u80FD\\uFF1A\"), mdx(\"p\", null, \"\\u670D\\u52A1\\u7AEF\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-ts\"\n  }, \"const container: Docker.Container = docker.getContainer(config.containerId);\\n\\n// \\u5224\\u65AD docker \\u5BB9\\u5668\\u72B6\\u6001\\u662F\\u5426\\u8FD0\\u884C\\nconst ContainerInfo = await container.inspect();\\nif (!ContainerInfo.State.Running) {\\n  ctx.socket.emit(\\\"error\\\", ContainerInfo.State.Status);\\n}\\n\\n// \\u5B9A\\u4E49\\u7EC8\\u7AEF\\u914D\\u7F6E\\nconst cmd = {\\n  AttachStdout: true,\\n  AttachStderr: true,\\n  AttachStdin: true,\\n  Tty: true,\\n  WorkingDir: workdir || \\\"/workspace\\\",\\n  Cmd: [\\\"zsh\\\"]\\n};\\n\\n// \\u5728\\u5BB9\\u5668\\u4E0A\\u8FD0\\u884C\\u7EC8\\u7AEF\\ncontainer.exec(cmd, (err, exec) => {\\n  // \\u76D1\\u542C\\u5BB9\\u5668\\n  container.wait((_, __) => {\\n    ctx.socket.emit(\\\"end\\\", \\\"ended\\\");\\n  });\\n\\n  if (err) {\\n    return;\\n  }\\n\\n  // \\u6267\\u884C\\u914D\\u7F6E\\n  const options = {\\n    Tty: true,\\n    Detach: false,\\n    stream: true,\\n    stdin: true,\\n    stdout: true,\\n    stderr: true,\\n    hijack: true // fix vim\\n  };\\n\\n  // \\u542F\\u52A8\\u4E00\\u4E2A\\u8FDB\\u7A0B\\u6765\\u8FD0\\u884C\\uFF0C\\u62FF\\u5230 stream \\u6570\\u636E\\u6D41\\u6765\\u548C\\u5BA2\\u6237\\u7AEF\\u4EA4\\u4E92\\n  exec.start(options, (_: any, stream: NodeJS.WritableStream) => {\\n\\n    // \\u521D\\u59CB\\u5316\\u8F93\\u5165\\u8F93\\u51FA\\u7684\\u5C3A\\u5BF8\\n    const dimensions = {\\n      h: parseInt(ctx.socket.handshake.query.rows),\\n      w: parseInt(ctx.socket.handshake.query.cols)\\n    };\\n    if (dimensions.h != 0 && dimensions.w != 0) {\\n      exec.resize(dimensions, () => {});\\n    }\\n\\n    // \\u76D1\\u542C\\u5BA2\\u6237\\u7AEF\\u7684\\u8F93\\u5165\\uFF0C\\u53D1\\u9001\\u5230 exec \\u7684 steam\\n    ctx.socket.on(\\\"data\\\", data => stream.write(data));\\n    // \\u76D1\\u542C\\u5BA2\\u6237\\u7AEF\\u7684\\u8F93\\u5165\\uFF0C\\u53D1\\u9001\\u5230 exec \\u7684 steam\\n    ctx.socket.on(\\\"resize\\\", dimensions =>\\n      exec.resize(dimensions, () => {})\\n    );\\n    ctx.socket.on(\\\"exit\\\", _ => exiter());\\n\\n    // \\u76D1\\u542C exec \\u7684\\u8F93\\u51FA\\uFF0C\\u53D1\\u9001\\u5230\\u5BA2\\u6237\\u7AEF\\n    stream.on(\\\"data\\\", chunk => ctx.socket.emit(\\\"data\\\", chunk.toString()));\\n    // \\u76D1\\u542C exec \\u7684\\u9519\\u8BEF\\n    stream.on(\\\"error\\\", data => ctx.socket.emit(\\\"error\\\", data));\\n    // \\u76D1\\u542C exec \\u7684\\u7ED3\\u675F\\n    stream.on(\\\"end\\\", data => ctx.socket.emit(\\\"exit\\\", data));\\n  });\\n});\\n\")), mdx(\"p\", null, \"\\u5BA2\\u6237\\u7AEF\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-ts\"\n  }, \"// \\u8FDE\\u63A5\\u670D\\u52A1\\u7AEF\\nthis.socket = io('ws://127.0.0.1:7001/term', connectOpts);\\n\\n// \\u6570\\u636E\\u76D1\\u542C\\nthis.socket.on('connect', () => {\\n  this.updateSize();\\n  this.setState({connectStatus: 1});\\n});\\nthis.socket.on('connected', () => {\\n  this.updateSize();\\n  this.triggerListeners('socket-connected');\\n});\\nthis.socket.on('disconnect', () => {\\n  this.setState({ connectStatus: 2 });\\n  this.triggerListeners('socket-disconnect');\\n})\\nthis.socket.on('exit', () => {\\n  this.disconnect();\\n  this.triggerListeners('socket-exit');\\n})\\nthis.socket.on('error', () => {})\\n\\n// \\u670D\\u52A1\\u7AEF\\u8F93\\u51FA\\u5230 xterm\\nthis.socket.on('data', (data: any) => {\\n  this.ondownStream();\\n  this.xterm.write(data)\\n  this.triggerListeners('socket-data', { data });\\n})\\n\\n// \\u6570\\u636E\\u548C\\u72B6\\u6001\\u76D1\\u542C\\nthis.xterm.onTitleChange((title) => {\\n  this.setState({ title })\\n});\\nthis.xterm.onData((data) => {\\n  this.updateSize();\\n  this.onupStream();\\n  this.socket.emit('data', data)\\n  this.triggerListeners('xterm-data', { data });\\n})\\nthis.xterm.onResize(() => {\\n  this.setState({dims: `${this.xterm.cols}\\xD7${this.xterm.rows}`})\\n})\\nthis.xterm.onCursorMove(() => {\\n  this.setState({cursor: `${this.xterm.buffer.cursorX}\\xD7${this.xterm.buffer.cursorY}`})\\n})\\nthis.xterm.focus();\\nthis.updateSize();\\n\")), mdx(\"p\", null, \"\\u52A0\\u4E0A\\u4E00\\u4E9B\\u8FB9\\u754C\\u548C\\u89C6\\u56FE\\u7684\\u6837\\u5F0F\\uFF0C\\u5C31\\u80FD\\u5B9E\\u73B0\\u6700\\u5F00\\u59CB\\u89C6\\u9891\\u6F14\\u793A\\u7684\\u6548\\u679C\\u4E86~\"), mdx(\"p\", null, mdx(\"figure\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {}\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"850px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/f1dea28d9203221ceb1f1c914a826ca1/8820e/term-peek.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"30.888030888030887%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAGCAYAAADDl76dAAAACXBIWXMAAAsSAAALEgHS3X78AAAAoUlEQVQY053Oyw6CMBAF0AIixEegJYVCARUamkJExf//tmvjig1EWZzMIzOTIY/3C2aaoPsBvVLomwbjfYAxBm3bQtner7TWIJXpIMYnStVBRhRpeIAQAr6/ByHkf0F0hEcZTjRBHIQ4ex4SRuG67raDO3tgecCZxQXOzLfe8sUaIWvk5RVZUSHNS5tfwLhAxLiVruCIkwyyvqGwhN3lQuIDpJyIy61Lav0AAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"终端的集成\",\n    \"title\": \"终端的集成\",\n    \"src\": \"/static/f1dea28d9203221ceb1f1c914a826ca1/8820e/term-peek.png\",\n    \"srcSet\": [\"/static/f1dea28d9203221ceb1f1c914a826ca1/ae269/term-peek.png 259w\", \"/static/f1dea28d9203221ceb1f1c914a826ca1/a4dff/term-peek.png 518w\", \"/static/f1dea28d9203221ceb1f1c914a826ca1/8820e/term-peek.png 850w\"],\n    \"sizes\": \"(max-width: 850px) 100vw, 850px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"\\u7EC8\\u7AEF\\u7684\\u96C6\\u6210\"), \"\\n  \")), mdx(\"div\", {\n    \"style\": {},\n    \"'flex',\": \"\",\n    \"justifycontent:\": \"\",\n    \"'center'}}\": \"\"\n  }, \"\\n  \", mdx(\"figure\", {\n    parentName: \"div\",\n    \"className\": \"gatsby-resp-image-figure\"\n  }, \"\\n    \", mdx(\"img\", {\n    parentName: \"figure\",\n    \"src\": \"/term-stru-e94eacefae1ad9d76eb318564ecd68e4.svg\"\n  }), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"\\u7EC8\\u7AEF\\u80FD\\u529B\\u67B6\\u6784\"), \"\\n  \")), mdx(\"h2\", null, \"\\u56DB\\u3001docker \\u8FDB\\u7A0B\\u56DE\\u6536\\u95EE\\u9898\"), mdx(\"p\", null, mdx(\"figure\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-figure\",\n    \"style\": {}\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"958px\"\n    }\n  }, \"\\n      \", mdx(\"a\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-link\",\n    \"href\": \"/static/e425ecabd045bc5c9d0fd4e844fac542/37bc7/term-process.png\",\n    \"style\": {\n      \"display\": \"block\"\n    },\n    \"target\": \"_blank\",\n    \"rel\": [\"noopener\"]\n  }, \"\\n    \", mdx(\"span\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"27.413127413127413%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAFCAYAAABFA8wzAAAACXBIWXMAAAsSAAALEgHS3X78AAABH0lEQVQY0z2QTWvCUBBFH34sXIuIkqoJCi6qlSQSmiaxAUHFxBgDSSDtquD//wenmQft4jLz5g2Xe0bZto3v+0jdbDbsdjvde56H67o4jqO1XC61VqsVpmkSxzHX65UgCEiSlPP5zPF4RG23W6bTqV42DIPZbKb7v9l8Pme9XjOZTOh0OiiltBzH5vl8cjqdSNOUoijIsgyVJAn3+52qqsjznKZpqOuay+WiE8hM3o/HA9mVeRCGeP4Hzdc3n4eDNhIPkTJNS2NIEkkkmIK93+91lXRRFBG2JqPRiMFgQL/XI3Hf+KlLguhA3hqVZcntdkMZxovGGQ6HjMfjf3PLslgsFvpPbiun6Ha79Pp9ui1y5bxSxCHvQUjWGgmyEP0CZgygr+cz4mUAAAAASUVORK5CYII=')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"a\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"终端与容器进程的对应\",\n    \"title\": \"终端与容器进程的对应\",\n    \"src\": \"/static/e425ecabd045bc5c9d0fd4e844fac542/37bc7/term-process.png\",\n    \"srcSet\": [\"/static/e425ecabd045bc5c9d0fd4e844fac542/ae269/term-process.png 259w\", \"/static/e425ecabd045bc5c9d0fd4e844fac542/a4dff/term-process.png 518w\", \"/static/e425ecabd045bc5c9d0fd4e844fac542/37bc7/term-process.png 958w\"],\n    \"sizes\": \"(max-width: 958px) 100vw, 958px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n  \"), \"\\n    \"), \"\\n    \", mdx(\"figcaption\", {\n    parentName: \"figure\",\n    \"className\": \"gatsby-resp-image-figcaption\"\n  }, \"\\u7EC8\\u7AEF\\u4E0E\\u5BB9\\u5668\\u8FDB\\u7A0B\\u7684\\u5BF9\\u5E94\"), \"\\n  \")), mdx(\"p\", null, \"\\u5728\\u96C6\\u6210 docker \\u7684\\u65F6\\u5019\\uFF0C\\u51FA\\u73B0\\u4E00\\u4E2A\\u95EE\\u9898\\u5C31\\u662F\\u5BA2\\u6237\\u7AEF\\u5237\\u65B0\\u591A\\u6B21\\u4E4B\\u540E\\uFF0C\\u670D\\u52A1\\u7AEF\\u51FA\\u73B0\\u5F88\\u591A\\u8FDE\\u63A5\\u8FDB\\u7A0B\\u6CA1\\u529E\\u6CD5\\u81EA\\u52A8\\u4E2D\\u65AD\\u3002\\u7B80\\u5355\\u641C\\u7D22\\u4E4B\\u540E\\u53D1\\u73B0\\u56E0\\u4E3A Terminal \\u5728 Container \\u91CC\\u542F\\u52A8\\u4E86 zsh\\uFF0C\\u800C zsh \\u53EF\\u4EE5\\u968F\\u610F\\u6267\\u884C\\u547D\\u4EE4\\u542F\\u52A8\\u8FDB\\u7A0B\\uFF0C\\u50F5\\u5C38\\u8FDB\\u7A0B\\u95EE\\u9898\\u5F88\\u96BE\\u907F\\u514D\\u3002\"), mdx(\"p\", null, \"\\u4E0D\\u8FC7\\u53EF\\u4EE5\\u4F7F\\u7528 phusion/baseimage \\u955C\\u50CF\\u6765\\u89E3\\u51B3\\u8FD9\\u4E2A\\u95EE\\u9898\\uFF0C\\u53EF\\u4EE5\\u67E5\\u770B \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/phusion/baseimage-docker\"\n  }, \"\\u5B98\\u65B9\\u6587\\u6863\"), \"\\u3002\"));\n}\n;\nMDXContent.isMDXComponent = true;"},"next":{"fileAbsolutePath":"E:/u-codes/storybok/content/blog/workpad/workpad-part-2.md","id":"4613ab2a-ad92-5bc2-8bb5-26199b71dacd","parent":{"name":"workpad-part-2","sourceInstanceName":"blog"},"excerpt":"基础架构就是实现什么核心功能，搭建一个什么样的接口，定义什么样的扩展开发方式。核心的开发模式很多，我选择的也并不是最优解，只是这个项目的实现，最后结果至少还不错，下面从三个方面说一下通用的层面做了哪些工作。 一. 扩展机制 （Extension） 每个 extension 里面都按照标准接口定义，注册数据模型、UI 渲染和命令机制。 【数据模型】需要对扩展内的全部数据进行管理，包括网络数据请求本地数据更新等； 【UI 渲染】需要根据全局的数据模型和本扩展数据，在 pannel…","fields":{"title":"🌋 WebIDE 的开发记录其二（核心架构）","slug":"/blog/workpad-part-2","description":"WorkPad 是一个非常有意思的项目，花了很多空闲时间打磨，光基础架构的重构就好几遍，现在略微记录下开发的思路和想法。本文为第二篇文章，谈谈基础架构是怎么实现的。","date":"2020-01-12","redirects":null,"datetime":"2020-01-12 22:23:32","categories":["webide"],"series":"WebIDE 的开发记录","tags":["思考","整理","WorkPad","WebIDE","云开发","在线编辑器","NOVUS","状态管理"],"status":"online"},"frontmatter":{"published":null,"tags":["思考","整理","WorkPad","WebIDE","云开发","在线编辑器","NOVUS","状态管理"],"theme":null,"slug":"workpad-part-2","date":"2020-01-12 22:23:32"},"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n  \"slug\": \"workpad-part-2\",\n  \"title\": \"🌋 WebIDE 的开发记录其二（核心架构）\",\n  \"date\": \"2020-01-12 22:23:32\",\n  \"author\": \"Ubug\",\n  \"description\": \"WorkPad 是一个非常有意思的项目，花了很多空闲时间打磨，光基础架构的重构就好几遍，现在略微记录下开发的思路和想法。本文为第二篇文章，谈谈基础架构是怎么实现的。\",\n  \"series\": \"WebIDE 的开发记录\",\n  \"categories\": [\"webide\"],\n  \"tags\": [\"思考\", \"整理\", \"WorkPad\", \"WebIDE\", \"云开发\", \"在线编辑器\", \"NOVUS\", \"状态管理\"],\n  \"banner\": \"./ground-design.jpg\",\n  \"bannerCredit\": \"\\\\[图文无关\\\\]\"\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n  console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n  return mdx(\"div\", props);\n};\nconst CodeWithPreview = makeShortcode(\"CodeWithPreview\");\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n      components\n    } = _ref,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"\\u57FA\\u7840\\u67B6\\u6784\\u5C31\\u662F\\u5B9E\\u73B0\\u4EC0\\u4E48\\u6838\\u5FC3\\u529F\\u80FD\\uFF0C\\u642D\\u5EFA\\u4E00\\u4E2A\\u4EC0\\u4E48\\u6837\\u7684\\u63A5\\u53E3\\uFF0C\\u5B9A\\u4E49\\u4EC0\\u4E48\\u6837\\u7684\\u6269\\u5C55\\u5F00\\u53D1\\u65B9\\u5F0F\\u3002\\u6838\\u5FC3\\u7684\\u5F00\\u53D1\\u6A21\\u5F0F\\u5F88\\u591A\\uFF0C\\u6211\\u9009\\u62E9\\u7684\\u4E5F\\u5E76\\u4E0D\\u662F\\u6700\\u4F18\\u89E3\\uFF0C\\u53EA\\u662F\\u8FD9\\u4E2A\\u9879\\u76EE\\u7684\\u5B9E\\u73B0\\uFF0C\\u6700\\u540E\\u7ED3\\u679C\\u81F3\\u5C11\\u8FD8\\u4E0D\\u9519\\uFF0C\\u4E0B\\u9762\\u4ECE\\u4E09\\u4E2A\\u65B9\\u9762\\u8BF4\\u4E00\\u4E0B\\u901A\\u7528\\u7684\\u5C42\\u9762\\u505A\\u4E86\\u54EA\\u4E9B\\u5DE5\\u4F5C\\u3002\"), mdx(\"h2\", null, \"\\u4E00. \\u6269\\u5C55\\u673A\\u5236 \\uFF08Extension\\uFF09\"), mdx(\"p\", null, \"\\u6BCF\\u4E2A extension \\u91CC\\u9762\\u90FD\\u6309\\u7167\\u6807\\u51C6\\u63A5\\u53E3\\u5B9A\\u4E49\\uFF0C\\u6CE8\\u518C\\u6570\\u636E\\u6A21\\u578B\\u3001UI \\u6E32\\u67D3\\u548C\\u547D\\u4EE4\\u673A\\u5236\\u3002\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u3010\\u6570\\u636E\\u6A21\\u578B\\u3011\\u9700\\u8981\\u5BF9\\u6269\\u5C55\\u5185\\u7684\\u5168\\u90E8\\u6570\\u636E\\u8FDB\\u884C\\u7BA1\\u7406\\uFF0C\\u5305\\u62EC\\u7F51\\u7EDC\\u6570\\u636E\\u8BF7\\u6C42\\u672C\\u5730\\u6570\\u636E\\u66F4\\u65B0\\u7B49\\uFF1B\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u3010UI \\u6E32\\u67D3\\u3011\\u9700\\u8981\\u6839\\u636E\\u5168\\u5C40\\u7684\\u6570\\u636E\\u6A21\\u578B\\u548C\\u672C\\u6269\\u5C55\\u6570\\u636E\\uFF0C\\u5728 pannel \\u91CC\\u9762\\u6E32\\u67D3\\u5177\\u4F53\\u7684\\u754C\\u9762\\uFF1B\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u3010\\u547D\\u4EE4\\u673A\\u5236\\u3011\\u662F\\u6CE8\\u518C\\u5230\\u5168\\u5C40\\u7684\\u547D\\u4EE4\\u51FD\\u6570\\uFF0C\\u53EF\\u4EE5\\u5728\\u4EFB\\u4F55\\u5730\\u65B9\\u88AB\\u8C03\\u7528\\uFF0C\\u6267\\u884C\\u4E00\\u7CFB\\u5217\\u52A8\\u4F5C\\u6765\\u4FEE\\u6539\\u6570\\u636E\\u6A21\\u578B\\u3002\")), mdx(\"p\", null, \"\\u8FD9\\u6837\\u4E09\\u4E2A\\u673A\\u5236\\u80FD\\u591F\\u4FDD\\u8BC1\\u6570\\u636E\\u7684\\u6B63\\u5E38\\u6D41\\u8F6C\\uFF0C\\u5F88\\u591A\\u8FD9\\u6837\\u7684\\u6269\\u5C55\\u5B8C\\u6210\\u4E86\\u6574\\u4E2A\\u5927\\u9879\\u76EE\\u7684\\u66F4\\u65B0:\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u7528\\u6237\\u64CD\\u4F5C\\u6267\\u884C\\u547D\\u4EE4 -> \\u547D\\u4EE4\\u4FEE\\u6539\\u6570\\u636E\\u6A21\\u578B -> \\u6570\\u636E\\u6A21\\u578B\\u54CD\\u5E94\\u5F0F\\u7684\\u901A\\u77E5 UI \\u5C42\\u6E32\\u67D3\"))), mdx(\"p\", null, \"\\u8FD9\\u4E09\\u4E2A\\u57FA\\u7840\\u67B6\\u6784\\u7684\\u5F00\\u53D1\\uFF0C\\u53CD\\u590D\\u63A8\\u6572\\u82B1\\u4E86\\u4E00\\u4E9B\\u65F6\\u95F4\\uFF0C\\u4F46\\u662F\\u540E\\u7EED\\u7684\\u6574\\u4E2A\\u5F00\\u53D1\\u6A21\\u5F0F\\u66F4\\u52A0\\u6E05\\u695A\\uFF0C\\u529F\\u80FD\\u7684\\u6DFB\\u52A0\\u90FD\\u662F\\u6C34\\u5E73\\u6269\\u5C55\\uFF0C\\u80FD\\u6548\\u66F4\\u9AD8\\uFF0C\\u800C\\u4E14\\u4E3A\\u4E4B\\u540E\\u7684\\u63D2\\u4EF6\\u673A\\u5236\\u63D0\\u4F9B\\u4E86\\u5F88\\u597D\\u7684\\u5207\\u5165\\u70B9\\u3002\"), mdx(\"h2\", null, \"\\u4E8C\\u3001\\u6570\\u636E\\u5C42\\uFF08\\u6570\\u636E\\u9A71\\u52A8\\u673A\\u5236 Novus + \\u6838\\u5FC3\\u6570\\u636E\\uFF09\"), mdx(\"p\", null, \"\\u5927\\u578B\\u9879\\u76EE\\u4E2D\\u4E00\\u4E2A\\u96C6\\u4E2D\\u6570\\u636E\\u9A71\\u52A8\\u7684\\u673A\\u5236\\u662F\\u975E\\u5E38\\u6709\\u5FC5\\u8981\\u7684\\uFF0C\\u7EC4\\u4EF6\\u4F17\\u591A\\u3001\\u4EA4\\u4E92\\u590D\\u6742\\u3001\\u914D\\u7F6E\\u7E41\\u591A\\uFF0C\\u6240\\u4EE5\\u5C06\\u9A71\\u52A8\\u7684\\u6570\\u636E\\u90E8\\u5206\\u62BD\\u53D6\\u51FA\\u6765\\uFF0C\\u6309\\u7167\\u6A21\\u5757\\u5212\\u5206\\u5F52\\u7F6E\\uFF0C\\u5355\\u4E00\\u6570\\u636E\\u6E90\\uFF0C\\u5E76\\u4EE5\\u6B64\\u6784\\u5EFA\\u9A71\\u52A8\\u66F4\\u65B0\\u673A\\u5236\\u3002\"), mdx(\"h3\", null, \"2.1 \", mdx(\"inlineCode\", {\n    parentName: \"h3\"\n  }, \"dva\")), mdx(\"p\", null, \"react \\u751F\\u6001\\u4E2D\\uFF0C\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"redux\"), \" \\u6216\\u8005 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"mobx\"), \" \\u90FD\\u662F\\u5F88\\u4F18\\u79C0\\u7684\\u65B9\\u6848\\uFF0C\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"redux\"), \" \\u5F00\\u53D1\\u6A21\\u5F0F\\u6574\\u4E2A\\u592A\\u6A21\\u677F\\u5316\\uFF0C\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"mobx\"), \" \\u4E0D\\u592A\\u719F\\u6089\\uFF0C\\u6240\\u4EE5\\u8003\\u8651\\u518D\\u4E09\\u4F7F\\u7528\\u4E86 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"dva\"), \" \\u4F5C\\u4E3A\\u6570\\u636E\\u5C42\\u7B2C\\u4E00\\u7248\\u3002\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"dva\"), \" \\u5C01\\u88C5\\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"redux\"), \" \\u65B9\\u6848\\uFF0C\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"model\"), \" \\u4E00\\u4E2A\\u6570\\u636E\\u4E2D\\u5FC3\\u5904\\u7406\\u5404\\u4E2A\\u6982\\u5FF5\\uFF0C\\u7406\\u89E3\\u548C\\u4E66\\u5199\\u4E0A\\u90FD\\u597D\\u7684\\u591A\\u3002\"), mdx(\"p\", null, \"\\u6570\\u636E\\u5C42\\u672C\\u8EAB\\u662F\\u4F7F\\u7528\\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"dva\"), \"\\uFF0C\\u8DB3\\u591F\\u7B80\\u5355\\u548C\\u6E05\\u6670\\uFF0C\\u5176\\u4E2D \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"model\"), \" \\u7684\\u6982\\u5FF5\\u975E\\u5E38\\u597D\\uFF0C\\u80FD\\u5B9A\\u4E49\\u72B6\\u6001\\u548C\\u72B6\\u6001\\u76F8\\u5173\\u7684\\u53D8\\u66F4\\u903B\\u8F91\\uFF0C\\u4E00\\u65B9\\u9762\\u57FA\\u7840\\u67B6\\u6784\\u51E0\\u4E2A\\u6570\\u636E\\u6A21\\u5757\\u53EF\\u4EE5\\u4F7F\\u7528\\uFF0C\\u53E6\\u4E00\\u65B9\\u9762\\u6269\\u5C55\\u673A\\u5236\\u7684\\u6BCF\\u4E00\\u4E2A extension \\u4E5F\\u5206\\u522B\\u5B9A\\u4E49 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"model\"), \"\\uFF0C\\u7EDF\\u4E00\\u7BA1\\u7406\\u6570\\u636E\\u548C\\u65B9\\u6CD5\\uFF0C\\u7B80\\u76F4\\u5B8C\\u7F8E\\u3002\"), mdx(\"p\", null, \"\\u4F8B\\u5982\\u72B6\\u6001\\u680F\\u6269\\u5C55\\u7684\\u652F\\u6301\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-ts\"\n  }, \"// \\u72B6\\u6001\\u680F\\u7684\\u6570\\u636E\\u6A21\\u578B\\nimport React, { ComponentClass, FunctionComponent } from 'react';\\nimport { Model } from 'dva';\\n\\nexport type TStatusConfig = {\\n  com: string | ComponentClass | FunctionComponent;\\n  command?: string | boolean;\\n  position?: 'left' | 'right';\\n  order?: number,\\n  id?: string;\\n}\\n\\nexport interface IFormState {\\n  statusPool: { [index: string]: TStatusConfig };\\n}\\n\\nconst model: Model = {\\n  namespace: 'statusBar',\\n  state: {\\n    statusPool: {}\\n  } as IFormState,\\n  effects: {\\n    *register({ payload }, { call, put, select }) {\\n      const statusPool = yield select(state => state.statusBar.statusPool);\\n      yield put({ type: 'save', payload: { statusPool: {...statusPool, [payload.id]: payload.widget} }});\\n    },\\n    *unregister({ payload }, { call, put, select }) {\\n      const names = payload;\\n      const statusPool = yield select(state => state.statusBar.statusPool);\\n      names.forEach((name: string) => {\\n        if (statusPool[name]) delete statusPool[name];\\n      });\\n      yield put({ type: 'save', payload: { statusPool: { ...statusPool } } });\\n    },\\n  },\\n  reducers: {\\n    save(state, action) {\\n      return { ...state, ...action.payload };\\n    },\\n  },\\n};\\n\\nexport default model;\\n\\n// \\u5728 connect \\u51FD\\u6570\\u4E2D mapDispatchToProps \\u540E\\u8C03\\u7528\\nthis.props.dispatch({\\n  type: 'statusBar/register',\\n  payload: {\\n    id: 'helloworld',\\n    widget: () => (<div>Hello World!</div>)\\n  }\\n});\\n\")), mdx(\"p\", null, \"\\u4E0D\\u8FC7\\u53EF\\u80FD\\u56E0\\u4E3A\\u6211 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"redux\"), \" \\u7528\\u7684\\u4E0D\\u591A\\uFF0C\\u6216\\u8005\\u7528\\u7684\\u4E0D\\u5BF9\\uFF0C\\u6216\\u8005\\u662F\\u65E9\\u8D77\\u7248\\u672C\\uFF0C\\u611F\\u89C9 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"dva\"), \" \\u4F7F\\u7528\\u4E2D\\u6709\\u5F88\\u591A\\u4E0D\\u987A\\u624B\\u7684\\u5730\\u65B9\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u5F88\\u591A\\u6982\\u5FF5\\u7279\\u6027\\uFF0C\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"put\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"call\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"payload\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"action\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"dispatch\"), \" \\u7B49\\u903B\\u8F91\\u4E00\\u4E2A\\u6CA1\\u5C11\\uFF0C\\u800C\\u4E14\\u6CA1\\u529E\\u6CD5\\u63A8\\u65AD\\uFF1B\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"action type\"), \" \\u5B57\\u7B26\\u4E32\\u6216\\u8005\\u5E38\\u91CF\\u7C7B\\u578B\\uFF0C\\u6CA1\\u529E\\u6CD5\\u4EE3\\u7801\\u63D0\\u793A\\uFF0C\\u6CA1\\u529E\\u6CD5\\u63A8\\u65AD\\uFF1B\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"payload\"), \" \\u4F5C\\u4E3A\\u53C2\\u6570\\uFF0C\\u6CA1\\u529E\\u6CD5\\u4EE3\\u7801\\u63D0\\u793A\\uFF0C\\u6CA1\\u529E\\u6CD5\\u63A8\\u65AD\\uFF1B\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u7EE7\\u627F\\u81EA \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"redux-saga\"), \" \\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Generator\"), \" \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Iterator\"), \" \\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"effects\"), \"\\uFF0C\\u7528\\u5230 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"yield *\"), \" \\u5F02\\u6B65\\u5904\\u7406\\u65B9\\u5F0F\\u3002\\u4E0D\\u4E60\\u60EF\\u3001\\u4E0D\\u559C\\u6B22\\uFF1B\")), mdx(\"p\", null, \"\\u56E0\\u4E3A\\u8FD9\\u4E9B\\u539F\\u56E0\\uFF0C\\u5728\\u540E\\u671F\\u5168\\u9762\\u8F6C\\u5411 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"TypeScript\"), \" \\u65F6\\uFF0C\\u4E00\\u76F4\\u60F3\\u628A\\u8FD9\\u5757\\u66FF\\u6362\\u6389\\u3002\"), mdx(\"h3\", null, \"2.2 \\u81EA\\u7814\\u6570\\u636E\\u5C42 \", mdx(\"inlineCode\", {\n    parentName: \"h3\"\n  }, \"Novus\")), mdx(\"p\", null, \"\\u6570\\u636E\\u5C42\\u7684\\u9700\\u6C42\\u4E00\\u822C\\u4E5F\\u5F88\\u7B80\\u5355\\uFF0C\\u5C31\\u662F\\u80FD\\u50A8\\u5B58\\u3001\\u80FD\\u6539\\u53D8\\u3001\\u80FD\\u54CD\\u5E94\\u57FA\\u672C\\u4E0A\\u5C31\\u53EF\\u4EE5\\u4E86\\u3002\\u8003\\u8651\\u5230 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"dva\"), \" \\u4E0D\\u987A\\u624B\\u7684\\u5730\\u65B9\\u548C\\u7B80\\u5355\\u9700\\u6C42\\u540E\\u81EA\\u5DF1\\u5F00\\u53D1\\u66FF\\u6362\\u4E86\\u6570\\u636E\\u62BD\\u8C61\\u5C42\\u7684\\u5B9E\\u73B0\\u3002\"), mdx(\"p\", null, \"\\u66F4\\u8BE6\\u7EC6\\u7684\\u5B9E\\u73B0\\u8BF7\\u770B \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"/blog/novus\"\n  }, \"\\uD83D\\uDCE6 \\u5B9E\\u73B0\\u4E00\\u4E2A\\u7B80\\u5355\\u6734\\u7D20\\u7684 react \\u6570\\u636E\\u7BA1\\u7406\\u5C42 NOVUS\"), \"\\u3002\"), mdx(\"p\", null, \"\\u5176\\u4E2D\\u5305\\u62EC\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"dva \\u4E2D\\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"router\"), \" \\u7684\\u4F7F\\u7528\\u5904\\u7406\\u591A\\u9875\\u9762\\u6570\\u636E\\u76D1\\u542C\\uFF0C\\u4E0E\\u76EE\\u524D\\u9879\\u76EE\\u7684\\u6570\\u636E\\u5C42\\u4E0D\\u592A\\u76F8\\u5173\\uFF0C\\u800C\\u4E14\\u9700\\u6C42\\u7B80\\u5355\\uFF0C\\u76F4\\u63A5\\u5206\\u79BB\\u6210\\u7EC4\\u4EF6\\uFF0C\\u76D1\\u542C \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"hashChange\"), \" \\u4E8B\\u4EF6\\u6E32\\u67D3\\u4E0D\\u540C\\u754C\\u9762\\u5373\\u53EF\\uFF1B\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u6570\\u636E\\u6E90 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"state\"), \" \\u6309\\u7167\\u903B\\u8F91\\u96C6\\u4E2D\\u6570\\u636E\\uFF0C\\u80FD\\u5B9A\\u4E49 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"ts type\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u80FD\\u5B9A\\u4E49 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"action\"), \" \\u65B9\\u6CD5\\u6539\\u53D8 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"state\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u4E0D\\u9700\\u8981 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"devtool\"), \" \\u7BA1\\u7406\\u5386\\u53F2\\uFF0C\\u6CA1\\u6709\\u65F6\\u95F4\\u6F2B\\u6E38\\u7684\\u9700\\u6C42\\uFF0C\\u4E5F\\u4E0D\\u523B\\u610F\\u5F3A\\u8C03\\u4FEE\\u6539\\u72B6\\u6001\\u903B\\u8F91\\u7684\\u5E72\\u51C0\\u3001\\u7B80\\u5355\\uFF0C\\u6240\\u4EE5\\u4E0D\\u7279\\u610F\\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"reducer\"), \" \\u6982\\u5FF5\\uFF0C\\u907F\\u514D\\u8BED\\u6CD5\\u5570\\u55E6\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u4E0D\\u7279\\u610F\\u8BBE\\u7F6E \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"reducer\"), \"\\uFF0C\\u4F46\\u662F\\u4ECD\\u7136\\u53EF\\u4EE5\\u5C01\\u88C5 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"setState\"), \" \\u4E3A\\u7EAF\\u51FD\\u6570\\u7684\\u5904\\u7406\\u6765\\u5B9E\\u73B0 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"reducer\"), \" \\u76F8\\u4F3C\\u7684\\u529F\\u80FD\\uFF0C\\u8FD9\\u91CC\\u56E0\\u4E3A\\u5BF9\\u6570\\u636E\\u7684\\u6D41\\u8F6C\\u4E0D\\u523B\\u610F\\u5F3A\\u8C03\\uFF0C\\u6240\\u4EE5\\u4E0D\\u9884\\u8BBE\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u80FD\\u901A\\u8FC7 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"connect\"), \" \\u6216\\u8005 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"useHooks\"), \" \\u65B9\\u6CD5\\u54CD\\u5E94\\u6570\\u636E\\u7684\\u53D8\\u5316\\u901A\\u77E5\\uFF0C\\u4ECE\\u800C\\u6E32\\u67D3\\u7EC4\\u4EF6\\u3002\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u6700\\u5927\\u7684\\u9A71\\u52A8\\u662F\\u80FD\\u591F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"ts\"), \" \\u7684\\u7C7B\\u578B\\u9650\\u5236\\u548C\\u63A8\\u65AD\\uFF0C\\u81EA\\u52A8\\u63D0\\u793A\\u6570\\u636E\\u7684\\u8BBF\\u95EE\\u548C \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"action\"), \" \\u7684\\u53C2\\u6570\\u548C\\u8FD4\\u56DE\\u3002\")), mdx(CodeWithPreview, {\n    codes: [{\n      name: \"novus-example.ts\",\n      code: novusExampleStr1\n    }, {\n      name: \"novus-example.tsx\",\n      code: novusExampleStr\n    }],\n    withTitle: true,\n    mdxType: \"CodeWithPreview\"\n  }), mdx(\"p\", null, \"\\u7528\\u8D77\\u6765\\u8FD8\\u662F\\u633A\\u8212\\u670D\\u7684\\uFF0C\\u96C6\\u4E2D\\u5F0F\\u7684 state \\u7BA1\\u7406\\uFF0C\\u53EF\\u63A8\\u65AD\\u7684\\u6570\\u636E\\u548C\\u65B9\\u6CD5\\uFF0C\\u6CA1\\u90A3\\u4E48\\u591A\\u7EA6\\u5B9A\\uFF0C\\u5728\\u5B9E\\u73B0\\u4E0A\\u533A\\u5206\\u526F\\u4F5C\\u7528\\u548C\\u72B6\\u6001\\u7B49\\u3002\\u5F53\\u7136\\u65E0\\u8BBA\\u7528\\u4EC0\\u4E48\\u65B9\\u6848\\u90FD\\u4E0D\\u662F\\u91CD\\u70B9\\uFF0C\\u91CD\\u70B9\\u662F\\u6709\\u4E00\\u4E2A\\u6570\\u636E\\u9A71\\u52A8\\u7EC4\\u4EF6\\u7684\\u673A\\u5236\\u3002\"), mdx(\"h3\", null, \"2.3 \\u6838\\u5FC3\\u6570\\u636E\"), mdx(\"p\", null, \"\\u4E0A\\u4E24\\u8282\\u8BF4\\u4E86\\u9A71\\u52A8\\u7684\\u673A\\u5236\\uFF0C\\u90A3\\u4E48\\u5177\\u4F53\\u54EA\\u4E9B\\u5462\\uFF1F\\u521A\\u5F00\\u59CB\\u53EA\\u5B9A\\u4E49\\u4E86\\u4EE5\\u4E0B\\u51E0\\u4E2A\\u6838\\u5FC3\\u7684\\u6570\\u636E\\u6A21\\u578B\\uFF1A\"), mdx(\"table\", null, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"name\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"desc\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"layout\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"[\", mdx(\"strong\", {\n    parentName: \"td\"\n  }, \"\\u6838\\u5FC3\"), \"]\", \" \\u8D1F\\u8D23\\u89C6\\u56FE\\u914D\\u7F6E\\u7684\\u6570\\u636E\\u652F\\u6301\\uFF0C\\u6E32\\u67D3\\u754C\\u9762\\u4E3B\\u8981\\u7ED3\\u6784\\uFF0C\\u4E3B\\u8981\\u662F UI \\u603B\\u7BA1\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"statusBar\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"[\", mdx(\"strong\", {\n    parentName: \"td\"\n  }, \"\\u6838\\u5FC3\"), \"]\", \" \\u8D1F\\u8D23\\u5E95\\u90E8\\u72B6\\u6001\\u680F\\u7684\\u6570\\u636E\\u652F\\u6301\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"menu\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"[\", mdx(\"strong\", {\n    parentName: \"td\"\n  }, \"\\u6838\\u5FC3\"), \"]\", \" \\u8D1F\\u8D23\\u83DC\\u5355\\u680F\\u548C\\u53F3\\u952E\\u83DC\\u5355\\u7684\\u6570\\u636E\\u652F\\u6301\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"workspace\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"[\", mdx(\"strong\", {\n    parentName: \"td\"\n  }, \"\\u6838\\u5FC3\"), \"]\", \" \\u8D1F\\u8D23\\u6574\\u4F53\\u7684\\u5E03\\u5C40\\u548C\\u5404\\u4E2A\\u6269\\u5C55\\u7684\\u754C\\u9762\\u63D2\\u69FD\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"os\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"[\", mdx(\"strong\", {\n    parentName: \"td\"\n  }, \"\\u6838\\u5FC3\"), \"]\", \" \\u8D1F\\u8D23\\u9879\\u76EE\\u914D\\u7F6E\\u3001\\u57FA\\u7840\\u4FE1\\u606F\\u7B49\\uFF0C\\u7528\\u6765\\u63D0\\u4F9B\\u6700\\u57FA\\u672C\\u9879\\u76EE\\u4FE1\\u606F\\u3001\\u5BB9\\u5668\\u4FE1\\u606F\\u7B49\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"fileManager\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(\", mdx(\"strong\", {\n    parentName: \"td\"\n  }, \"\\u6269\\u5C55\"), \") \\u8D1F\\u8D23\\u9879\\u76EE\\u6587\\u4EF6\\u6811\\u548C\\u6587\\u4EF6\\u7684\\u6570\\u636E\\u6A21\\u578B\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"gitManager\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(\", mdx(\"strong\", {\n    parentName: \"td\"\n  }, \"\\u6269\\u5C55\"), \") \\u8D1F\\u8D23\\u9879\\u76EE git \\u4FE1\\u606F\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"output\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(\", mdx(\"strong\", {\n    parentName: \"td\"\n  }, \"\\u6269\\u5C55\"), \") \\u8D1F\\u8D23\\u5168\\u90E8\\u7684\\u8C03\\u8BD5\\u548C\\u8F93\\u51FA\\u4FE1\\u606F\\u6570\\u636E\\u6A21\\u578B\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"writer\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(\", mdx(\"strong\", {\n    parentName: \"td\"\n  }, \"\\u6269\\u5C55\"), \") \\u8D1F\\u8D23\\u7528\\u6237\\u6253\\u5F00\\u7684\\u6587\\u4EF6\\u6570\\u636E\\u7BA1\\u7406\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"pluginManager\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(\", mdx(\"strong\", {\n    parentName: \"td\"\n  }, \"\\u6269\\u5C55\"), \") \\u8D1F\\u8D23\\u5916\\u56F4\\u975E\\u6838\\u5FC3\\u63D2\\u4EF6\\u7684\\u6570\\u636E\\u6A21\\u578B\")))), mdx(\"p\", null, \"\\u8FD9\\u51E0\\u4E2A\\u6570\\u636E\\u6A21\\u578B\\uFF0C\\u63CF\\u8FF0\\u4E86\\u6700\\u57FA\\u7840\\u7684\\u529F\\u80FD\\u652F\\u6491\\uFF0C\\u914D\\u5408\\u6570\\u636E\\u5F00\\u53D1\\u51FA\\u5E03\\u5C40 UI \\u548C\\u6837\\u5F0F\\uFF0C\\u5269\\u4E0B\\u7684\\u5C31\\u662F\\u5728\\u6846\\u67B6\\u4E0A\\u6DFB\\u52A0\\u9AD8\\u7EA7\\u529F\\u80FD\\u4E86\\u3002\"), mdx(\"h2\", null, \"\\u4E09. \\u57FA\\u672C UI \\u6846\\u67B6 \\uFF08render\\uFF09\"), mdx(\"p\", null, \"IDE \\u7684\\u6846\\u67B6\\u548C\\u4E00\\u822C\\u7684\\u5E03\\u5C40\\u4E0D\\u592A\\u76F8\\u540C\\uFF0C\\u66F4\\u503E\\u5411\\u4E8E\\u4E00\\u4E2A\\u684C\\u9762\\u5E94\\u7528\\uFF0C\\u89C6\\u56FE\\u4E0A\\u6709\\u83DC\\u5355\\u680F\\u3001\\u72B6\\u6001\\u680F\\u529F\\u80FD\\uFF0C\\u6709\\u591A\\u4E2A\\u533A\\u57DF\\u5212\\u5206\\uFF0C\\u5176\\u4E2D\\u8FD8\\u6709 tab \\u548C\\u5BF9\\u5E94\\u7684 panel\\u3002\\u6240\\u4EE5\\u754C\\u9762\\u5E03\\u5C40\\u4E0A\\u7684\\u5B9E\\u73B0\\u8D39\\u4E86\\u70B9\\u7CBE\\u529B\\uFF0C\\u5C24\\u5176\\u521A\\u5F00\\u59CB\\u60F3\\u5B9E\\u73B0\\u6BD4\\u8F83\\u7075\\u6D3B\\u7684\\u5E03\\u5C40\\u5F62\\u5F0F\\uFF0C\\u4F46\\u662F\\u7531\\u4E8E\\u6570\\u636E\\u548C\\u4EA4\\u4E92\\u7684\\u8D39\\u529B\\u5BFC\\u81F4\\u96BE\\u5EA6\\u4E0A\\u5347\\uFF0C\\u800C\\u4E14\\u786E\\u5B9E\\u6CA1\\u6709\\u5FC5\\u8981\\u3002\\u6700\\u540E\\u6572\\u5B9A\\u4E00\\u4E2A\\u65B9\\u6848\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"menu \\u9876\\u90E8\\u83DC\\u5355\\u680F\\uFF0C\\u5C55\\u793A\\u6240\\u6709\\u7684\\u529F\\u80FD\\u5206\\u7C7B\\u548C\\u5217\\u8868\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"layout\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"left + right + bottom + dealer\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"stack\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"panel + tab\\uFF08extensions / plugin \\u63A5\\u7BA1\\uFF09\"))))))), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"statusBar \\u5E95\\u90E8\\u72B6\\u6001\\u680F\\uFF0C\\u7528\\u6765\\u5C55\\u793A\\u5177\\u4F53\\u72B6\\u6001\\u6570\\u636E\\u529F\\u80FD\")), mdx(\"p\", null, \"\\u6BCF\\u4E00\\u4E2A\\u754C\\u9762\\u4E0A\\u7684\\u529F\\u80FD\\u548C\\u663E\\u793A\\u90FD\\u662F\\u88AB layout \\u7684\\u6570\\u636E\\u9A71\\u52A8\\uFF0C\\u6BCF\\u4E00\\u4E2A panel \\u7684\\u89C6\\u56FE\\u5360\\u4F4D\\u90FD\\u7531\\u57FA\\u7840\\u6846\\u67B6\\u7BA1\\u7406\\uFF0C\\u7136\\u540E\\u7684\\u6269\\u5C55\\u548C\\u63D2\\u4EF6\\u53EA\\u9700\\u8981\\u8D1F\\u8D23 panel \\u7684\\u5185\\u5BB9\\u548C\\u4EA4\\u4E92\\u5B9A\\u4E49\\u5373\\u53EF\\u3002\\u8FD9\\u6837\\u5927\\u5927\\u964D\\u4F4E\\u4E86\\u529F\\u80FD\\u548C\\u754C\\u9762\\u5E03\\u5C40\\u7684\\u8026\\u5408\\u3002\"), mdx(\"p\", null, \"\\u975E\\u5E38\\u7C7B\\u4F3C\\u73B0\\u5728\\u7684\\u5FAE\\u670D\\u52A1\\u7684\\u6982\\u5FF5\\uFF0C\\u53EA\\u662F\\u8FD9\\u91CC\\u9762\\u7684\\u670D\\u52A1\\u652F\\u6301\\u5E76\\u4E0D\\u9700\\u8981\\u533A\\u5206\\u7684\\u90A3\\u4E48\\u6E05\\u695A\\uFF0C\\u8FD8\\u662F\\u6709\\u4E00\\u4E9B\\u6570\\u636E\\u4EA4\\u4E92\\u548C\\u4F9D\\u8D56\\u7684\\u3002\"), mdx(\"h2\", null, \"\\u56DB. \\u547D\\u4EE4\\u673A\\u5236 \\uFF08Command\\uFF09\"), mdx(\"p\", null, \"commands \\u8D1F\\u8D23\\u63D0\\u4F9B\\u4E00\\u4E2A\\u52A8\\u4F5C\\u6CE8\\u518C\\u3001\\u50A8\\u5B58\\u548C\\u89E6\\u53D1\\u7684\\u673A\\u5236\\uFF0C\\u662F\\u4E00\\u4E2A\\u53EF\\u4EE5\\u5168\\u5C40\\u89E6\\u53D1\\u7684\\u529F\\u80FD\\u5217\\u8868\\uFF0C\\u4E5F\\u662F\\u53C2\\u8003 VSCode \\u7684 action \\u4E00\\u4E2A\\u6A21\\u5F0F\\uFF0C\\u8FD9\\u91CC\\u548C\\u6570\\u636E\\u6A21\\u578B\\u7684\\u52A8\\u4F5C \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"action\"), \" \\u907F\\u514D\\u6DF7\\u4E71\\uFF0C\\u4F7F\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Command\"), \" \\u5173\\u952E\\u8BCD\\u3002\"), mdx(\"p\", null, \"\\u6BD4\\u5982\\u4E0B\\u9762\\u8FD9\\u4E2A\\u5B9E\\u4F8B\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-ts\"\n  }, \"import { novus } from '@novus';\\n\\nconst { layoutModel, fileManagerModel } = novus.models;\\n\\nexport const commands = {\\n  openNewTab: {\\n    trigger: () => {\\n      layoutModel.actions.openPanel(\\\"fileManager\\\");\\n    }\\n  },\\n  copyFile: {\\n    label: \\\"\\u590D\\u5236\\\",\\n    trigger: () => {\\n      const file = fileManagerModel.state.onContextMenuFile;\\n      if (file) {\\n        fileManagerModel.actions.setStates({ copyPool: file });\\n        updateContextMenu(file);\\n      }\\n    }\\n  },\\n  pasteFile: {\\n    label: \\\"\\u7C98\\u8D34\\\",\\n    when: () => {\\n      return !!fileManagerModel.state.copyPool;\\n    },\\n    trigger: async () => {\\n      const {onContextMenuFile, copyPool} = fileManagerModel.state;\\n      const {isDir, relative, parent} = onContextMenuFile;\\n      if (onContextMenuFile && copyPool) {\\n        const targetDir = isDir ? relative : (parent === \\\".\\\" ? \\\"/\\\" : parent);\\n        await fileManagerModel.actions.copyTo(copyPool.relative, targetDir);\\n      }\\n    }\\n  },\\n}\\n\")), mdx(\"p\", null, \"\\u8FD9\\u4E2A\\u547D\\u4EE4\\u7684\\u8981\\u6C42\\u6BD4\\u8F83\\u4E25\\u683C\\uFF0C\\u5C3D\\u91CF\\u53EA\\u80FD\\u8C03\\u7528\\u6570\\u636E\\u6A21\\u578B\\u7684\\u65B9\\u6CD5\\uFF0C\\u5C5E\\u4E8E\\u6570\\u636E\\u7684\\u9A71\\u52A8\\u90E8\\u5206\\u3002\\u6574\\u4E2A\\u9879\\u76EE\\u5185\\u8FD9\\u79CD\\u547D\\u4EE4\\u4E0A\\u767E\\u4E2A\\uFF0C\\u57FA\\u672C\\u6DB5\\u76D6\\u4E86\\u7528\\u6237\\u7684\\u64CD\\u4F5C\\u548C\\u54CD\\u5E94\\u5F0F\\u7684\\u65B9\\u6CD5\\u7B49\\u3002\"), mdx(\"p\", null, \"\\u547D\\u4EE4\\u672C\\u8EAB\\u6709\\u56FA\\u5B9A\\u7684\\u6267\\u884C\\u6D41\\u7A0B\\uFF0C\\u6BD4\\u5982\\u53EF\\u4EE5\\u5B9A\\u4E49\\u547D\\u4EE4\\u7684\\u3010\\u524D\\u7F6E\\u6761\\u4EF6\\u3011\\uFF0C\\u8FBE\\u4E0D\\u5230\\u524D\\u7F6E\\u6761\\u4EF6\\u5C06\\u4E0D\\u80FD\\u6267\\u884C\\u3002\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-ts\"\n  }, \"commandsPool.dashboard.openNewTab.trigger()\\n// \\u7B49\\u540C\\u4E8E\\u7C7B\\u4F3C\\u65B9\\u6CD5\\ncommandsManager.trigger('dashboard/openNewTab')\\n\")), mdx(\"p\", null, \"actions \\u662F\\u547D\\u4EE4\\u5F0F\\u673A\\u5236\\u7684\\u50A8\\u5B58\\u5730\\u65B9\\uFF0C\\u63D0\\u4F9B\\u7684\\u529F\\u80FD\\u975E\\u5E38\\u7B80\\u5355\\uFF0C\\u4F46\\u662F\\u5374\\u9A71\\u52A8\\u4E86\\u6574\\u4E2A\\u9879\\u76EE\\u8FD0\\u884C\\u3002\"), mdx(\"h2\", null, \"\\u60F3\\u6CD5\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u6709\\u65F6\\u5019\\u4E00\\u4E2A\\u673A\\u5236\\u3001\\u6A21\\u5F0F\\u5E76\\u4E0D\\u662F\\u5F88\\u590D\\u6742\\u7684\\u63D0\\u4F9B\\u5F88\\u591A\\u529F\\u80FD\\uFF0C\\u5F88\\u53EF\\u80FD\\u53EA\\u662F\\u4E00\\u4E2A\\u7EA6\\u5B9A\\uFF0C\\u7EA6\\u5B9A\\u6309\\u7167\\u4EC0\\u4E48\\u6570\\u636E\\u7ED3\\u6784\\u548C\\u65B9\\u6CD5\\u50A8\\u5B58\\u548C\\u8C03\\u7528\\uFF0C\\u914D\\u5957\\u63D0\\u4F9B\\u51E0\\u4E2A\\u64CD\\u4F5C\\u51FD\\u6570\\u53EF\\u80FD\\u5C31\\u80FD\\u5728\\u5176\\u4E0A\\u642D\\u5EFA\\u4E0A\\u5C42\\u4E86\\u3002\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u4E1A\\u5185\\u4F18\\u79C0\\u7684\\u6846\\u67B6\\u548C\\u89E3\\u51B3\\u65B9\\u6848\\u5F88\\u591A\\uFF0C\\u4F46\\u662F\\u5B9E\\u9645\\u9879\\u76EE\\u4F7F\\u7528\\u7684\\u65F6\\u5019\\u8FD8\\u662F\\u8D81\\u624B\\u7684\\u66F4\\u597D\\u7528\\u3002\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u6BCF\\u4E2A\\u4EA7\\u54C1\\u90FD\\u6709\\u6838\\u5FC3\\u529F\\u80FD\\u548C\\u5916\\u56F4\\u529F\\u80FD\\uFF0C\\u4E8B\\u5148\\u8BBE\\u8BA1\\u3001\\u9884\\u7559\\u8BBE\\u8BA1\\u7A7A\\u95F4\\u80FD\\u591F\\u65B9\\u9762\\u4EE5\\u540E\\u6301\\u7EED\\u7684\\u5F00\\u53D1\\u4F53\\u9A8C\\u3002\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u590D\\u6742\\u9879\\u76EE\\u9700\\u8981\\u5148\\u89E3\\u8026\\uFF0C\\u5404\\u4E2A\\u4F9D\\u8D56\\u548C\\u6A21\\u5757\\u9700\\u8981\\u8BBE\\u8BA1\\u7EC4\\u5408\\u8D77\\u6765\\u7684\\u6A21\\u5F0F\\uFF0C\\u624D\\u80FD\\u8BA9\\u9879\\u76EE\\u590D\\u6742\\u5EA6\\u6C34\\u5E73\\u6269\\u5F20\\u3002\")));\n}\n;\nMDXContent.isMDXComponent = true;"}}}}